三列浮动固定布局
three column float fixed layout
<!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>
我的正文宽度为 960px,所以我把它分成 3 列,每列 300px X 3,所以总共 900px 和边距 30px X 2 b/w 两列总共 60px.All总和为 960px。
现在我给第一个列宽 300px 并使用 float 属性,所以第二个框在它旁边对齐所以我给了 330px 的边距 20px 所以我得到了工作 done.So 我在右边有一个 space 左边大约 330px,我给第三个框留了 660px 的边距,也就是 20px 和宽度 300px。
我希望第三个框紧挨着第二个框,但没有发生,而是转到第二行,我知道我可以使用向左浮动的第二个框或向右浮动到第三个 box.I 想要space.
要知道为什么这种方法无法发挥作用
在第二个 1 中我使用了 aside 和 section as inline-block 即使它有效,但问题是,我在所有三个盒子上使用了 300px,消耗了 900px [300X3=900]我的 'body' 宽度为 960px,当我在右侧给出 30px 和 30px 的边距时,第三个框移动到第二行,但是当我使用 30px 和 20px 时,它保持不变,这是为什么?
很简单,您没有让 column2 向左浮动,所以它包含在正常的文档流中。所以它获取了整个块 space 并将第三列移动到它下面。您只需要
.col2 {
background: rgb(219,126,64);
height: 500px;
width:300px;
float: left;
margin-left:30px;
}
考虑到这一点,我还减少了 margin-left,因为它会从 column1 计算它的边距,因为它在我应用浮动后堆叠在 column1 上。
请勾选这个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>
<!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>
我的正文宽度为 960px,所以我把它分成 3 列,每列 300px X 3,所以总共 900px 和边距 30px X 2 b/w 两列总共 60px.All总和为 960px。
现在我给第一个列宽 300px 并使用 float 属性,所以第二个框在它旁边对齐所以我给了 330px 的边距 20px 所以我得到了工作 done.So 我在右边有一个 space 左边大约 330px,我给第三个框留了 660px 的边距,也就是 20px 和宽度 300px。
我希望第三个框紧挨着第二个框,但没有发生,而是转到第二行,我知道我可以使用向左浮动的第二个框或向右浮动到第三个 box.I 想要space.
要知道为什么这种方法无法发挥作用在第二个 1 中我使用了 aside 和 section as inline-block 即使它有效,但问题是,我在所有三个盒子上使用了 300px,消耗了 900px [300X3=900]我的 'body' 宽度为 960px,当我在右侧给出 30px 和 30px 的边距时,第三个框移动到第二行,但是当我使用 30px 和 20px 时,它保持不变,这是为什么?
很简单,您没有让 column2 向左浮动,所以它包含在正常的文档流中。所以它获取了整个块 space 并将第三列移动到它下面。您只需要
.col2 {
background: rgb(219,126,64);
height: 500px;
width:300px;
float: left;
margin-left:30px;
}
考虑到这一点,我还减少了 margin-left,因为它会从 column1 计算它的边距,因为它在我应用浮动后堆叠在 column1 上。
请勾选这个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>