三列浮动固定布局答案

【问题标题】：three column float fixed layout三列浮动固定布局
【发布时间】：2015-05-18 03:48:59
【问题描述】：

<!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 像素。

现在我给了 300 像素的第一列宽度并使用了浮点属性，所以第二个框在它旁边对齐，所以我给了 330 像素的边距，即 20 像素，所以我完成了工作。所以我还有一个空间右边330px，我给第3个盒子留了660px的边距，也就是20px，宽300px。

我希望第 3 个框位于第二个旁边，但它没有发生，而是进入第二行，我知道我可以使用 float-left 两个 second box 或使用 float right to 3rd box。我想知道为什么会这样方法行不通，他们是空间。

在第二个 1 中，我使用了一边和部分作为内联块，即使它可以工作，但问题是，我在所有三个盒子上都使用了 300 像素，消耗了 900 像素 [300X3=900] 我的“身体”宽度是960px 当我在右边给出 30px 和 30px 的边距时，第三个框移动到第二行，但是当我使用 30px 和 20px 时它仍然存在，为什么会这样？

【问题讨论】：

标签： html css css-float

【解决方案1】：

很简单，您没有使 column2 向左浮动，因此它包含在正常的文档流中。所以它获取整个块空间并移动它下面的第三列。你需要做的就是

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

考虑到这一点，我还减少了margin-left，因为它会从column1计算它的margin，因为它在我应用浮动后堆叠在column1上。

【讨论】：

没有边距不会起作用，因为它是从 col1 之前计算的，因为它是浮动的，它起作用是因为你已经浮动了

【解决方案2】：

请检查这个http://jsfiddle.net/966naq5e/17/ 我改变了一点结构并更新了

aside, article, section, header, footer, nav {
    display: block;
    margin:0;
    padding:0;
}
*{
    box-sizing: border-box
}
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 .content{
    background: rgb(237, 228, 214);
    height: 500px;

}
.col2 .content{
    background: rgb(219,126,64);
    height: 500px;


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

}
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;
}
.container{
    width: 960px;
    margin: 0 auto;
}
.holder{
    margin: 0 -15px;
    overflow: hidden;
}
.holder .col{
    width: 330px;
    padding: 0 15px;
    float: left;
}

<div class="container">
    <div class="holder">
        <section class="col1 col">
         <div class="content">
             This is where the really important stuff goes.
         </div>
        </section>
        <section class="col2 col">
         <div class="content">This is where equally important stuff goes.</div>
        </section>
        <aside class="col3 col">
       <div class="content"> This is where the related content goes.</div>
        </aside>
    </div>
</div>
<footer>Copyright stuff....</footer>

【讨论】：