<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>3 column layout</title>
<style>
aside, article, section, header, footer, nav {
    display: block;
}
html, body {
    margin: 0;
    padding: 0;
}
html {
    background: rgb(123, 121, 143);
}
body {
    width: 960px;
    background: #fff;
    margin: 0 auto 2em;
    font: 100% Georgia, "Times New Roman", Times, serif;
}
header {
    background: rgb(76, 67, 65);
    margin-bottom: 20px;
}
header h1 {
    font: normal 2em Arial, Helvetica, sans-serif;
    color: white;
    text-align: center;
    line-height: 4em;
    text-transform: uppercase;
    letter-spacing:.1em;
    margin: 0;
}
.col1 {
    background: rgb(237, 228, 214);
    height: 500px;
    float:left;
    width:300px;

}
.col2 {
    background: rgb(219,126,64);
    height: 500px;
    width:300px;
    margin-left:330px;

}
.col3 {
    background: rgb(173, 169, 130);
    height: 500px;
    width:300px;
    margin-left:660px;
}
footer {
    background: rgb(100, 98, 102);
    line-height: 3em;
    font-size: .6em;
    color: white;
    padding: 0 2em;
    clear: both;
}
</style>
</head>
<body>
<header>
<h1>Cool company header</h1>
</header>
<section class="col1">
This is where the really important stuff goes.
</section>
<section class="col2">
This is where equally important stuff goes.
</section>
<aside class="col3">
This is where the related content goes.
</aside>
<footer>Copyright stuff....</footer>
</body>
</html>


要么

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>3 column layout</title>
<style>
aside, article, section, header, footer, nav {
    display: block;
    margin:0;
    padding:0;
}
html, body {
    margin: 0;
    padding: 0;
}
html {
    background: rgb(123, 121, 143);
}
body {
    width: 960px;
    background: #fff;
    margin: 0 auto 2em;
    font: 100% Georgia, "Times New Roman", Times, serif;
}
header {
    background: rgb(76, 67, 65);
    margin-bottom: 20px;
}
header h1 {
    font: normal 2em Arial, Helvetica, sans-serif;
    color: white;
    text-align: center;
    line-height: 4em;
    text-transform: uppercase;
    letter-spacing:.1em;
    margin: 0;
}
.col1 {
    background: rgb(237, 228, 214);
    height: 500px;
    float:left;
    width:300px;
    margin-right:30px;

}
.col2 {
    background: rgb(219,126,64);
    height: 500px;
    width:300px;
    margin-right:20px;


}
.col3 {
    background: rgb(173, 169, 130);
    height: 500px;
    width:300px;

}
footer {
    background: rgb(100, 98, 102);
    line-height: 3em;
    font-size: .6em;
    color: white;
    padding: 0 2em;
    clear: both;
}

section {
    display:inline-block;
}
aside {
    display:inline-block;
}

</style>
</head>
<body>
<header>
<h1>Cool company header</h1>
</header>
<section class="col1">
This is where the really important stuff goes.
</section>
<section class="col2">
This is where equally important stuff goes.
</section>
<aside class="col3">
This is where the related content goes.
</aside>
<footer>Copyright stuff....</footer>
</body>
</html>


我的宽度为960像素,因此将其分为3列,每列300像素X 3,因此总计900像素,边距为30像素X 2 b / w,两列总计60像素。加起来总计为960像素。

现在我给了第一列宽度300px并使用了float属性,所以第二个框在它旁边对齐,所以我给了330px的边距,即20px,这样我就完成了工作。所以我在上面留了大约330px的空间是的,我给第三个方框留出660px的边距,即20px,宽度为300px。

我希望第三个框位于第二个框旁边,这不会发生,而是转到第二行,我知道我可以使用float-left两个第二框或使用float到第三个框。我想知道为什么这种方法没有努力工作是他们的空间。

在第二个1中,我仍然使用aside和section作为内联块,但问题是,我在所有三个框上都使用了300px,这消耗了900px [300X3 = 900]我的“ body”宽度为960px在右边给30px和30px的边距,第三个框移到第二行,但是当我使用30px和20px时,为什么呢?

最佳答案

很简单,您没有使column2浮动到左侧,因此它包含在常规文档流中。因此,它将获取整个块空间并将其下的第三列移动。您需要做的就是



.col2 {
    background: rgb(219,126,64);
    height: 500px;
    width:300px;
    float: left;
    margin-left:30px;
}





考虑到这一点,我还减少了margin-left,因为在我对其应用浮动之后,由于它将在column1上方堆叠,因此它将从column1计算出其利润。

关于html - 三列浮球固定布局,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29069908/

10-12 00:16