下面我就为你详细讲解一下“CSS网页布局入门教程7:二列固定宽度居中”的完整攻略。
标题
介绍
本教程将会讲解如何使用 CSS 实现二列固定宽度居中布局。
示例说明
我们来通过两个示例来说明此布局。
示例1
首先,HTML 代码如下:
<div class="container">
<div class="left">
<h3>左侧栏</h3>
<p>这是左侧栏的内容</p>
</div>
<div class="right">
<h3>右侧栏</h3>
<p>这是右侧栏的内容</p>
</div>
</div>
其中,.container
是容器的样式类,.left
和 .right
分别是左侧栏和右侧栏的样式类。
接下来,我们来实现样式:
.container {
width: 800px;
margin: 0 auto;
}
.left {
float: left;
width: 200px;
background-color: #ccc;
}
.right {
float: right;
width: 600px;
background-color: #eee;
}
在上面的代码中,.container
的样式设置了宽度为 800px,并使用 margin: 0 auto;
让容器水平居中。.left
使用了 float: left;
让左侧栏向左浮动,设置了宽度为 200px,背景颜色为 #ccc,.right
使用了 float: right;
让右侧栏向右浮动,设置了宽度为 600px,背景颜色为 #eee。
示例2
HTML 代码如下:
<div class="container">
<div class="left">
<h3>左侧栏</h3>
<p>这里是左侧栏的内容</p>
</div>
<div class="right">
<h3>右侧栏</h3>
<p>这里是右侧栏的内容</p>
</div>
<div class="clear"></div>
</div>
其中,.clear
是清除浮动的样式类。
接下来,我们来实现样式:
.container {
width: 800px;
margin: 0 auto;
}
.left {
float: left;
width: 200px;
background-color: #ccc;
}
.right {
margin-left: 220px;
background-color: #eee;
}
.clear {
clear: both;
}
在上面的代码中,.container
的样式设置了宽度为 800px,并使用 margin: 0 auto;
让容器水平居中。.left
使用了 float: left;
让左侧栏向左浮动,设置了宽度为 200px,背景颜色为 #ccc。.right
没有使用浮动,而是使用了 margin-left: 220px;
让右侧栏距离左侧栏 20px,并设置了背景颜色为 #eee,最后使用了 .clear
清除浮动。
结束语
以上就是使用 CSS 实现二列固定宽度居中布局的方法,希望对你有所帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:CSS网页布局入门教程7:二列固定宽度居中 - Python技术站