cjh CSS 布局 - 浮动实例（通过使用 float 属性，可以轻松地并排浮动内容框）
CSS 布局 - 浮动实例（通过使用 float 属性，可以轻松地并排浮动内容框）box-sizing
通过使用 float 属性，可以轻松地并排浮动内容框：
实例
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%; /* 三个框（四框使用 25%，两框使用 50%，以此类推） */
padding: 50px; /* 如果需要在图片间增加间距 */
}
实例：
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%;
padding: 50px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h1>网格框</h1>
<p>并排浮动的框：</p>
<div class="clearfix">
<div class="box" style="background-color:#bbb">
<p>框中的一些文本。</p>
</div>
<div class="box" style="background-color:#ccc">
<p>框中的一些文本。</p>
</div>
<div class="box" style="background-color:#ddd">
<p>框中的一些文本。</p>
</div>
</div>
<p>请注意，我们还用了 clearfix hack 来处理布局流，并添加了 box-sizing 属性，以确保框不会由于额外的内边距（填充）而损坏。尝试删除此代码以查看效果。</p>
</body>
</html>
什么是 box-sizing？
您可以轻松地并排创建三个浮动框。但是，当您添加一些内容来扩大每个框的宽度（例如，内边距或边框）时，这个框会损坏。 box-sizing 属性允许我们在框的总宽度（和高度）中包括内边距和边框，确保内边距留在框内而不会破裂。
.img-container {
float: left;
width: 33.33%; /* 三个框（四框使用 25%，两框使用 50%，以此类推） */
padding: 5px; /* 如果需要在图片间增加间距 */
}
实例：
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.img-container {
float: left;
width: 33.33%;
padding: 5px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h1>并排的图像</h1>
<p>并排浮动图像：</p>
<div class="clearfix">
<div class="img-container">
<img src="/i/photo/tulip.jpg" alt="Tulip" style="width:100%">
</div>
<div class="img-container">
<img src="/i/photo/tulip-2.jpg" alt="Tulip" style="width:100%">
</div>
<div class="img-container">
<img src="/i/photo/flower-4.jpg" alt="Flower" style="width:100%">
</div>
</div>
<p>请注意，我们还用了 clearfix hack 来处理布局流，并添加了 box-sizing 属性以确保图像容器不会由于额外的内边距（填充）而损坏。请尝试删除此代码以查看效果。</p>
</body>
</html>
2、本资源基本为原创，部分来源其他付费资源平台或互联网收集，如有侵权请联系及时处理。
3、本站大部分文章的截图来源实验测试环境，请不要在生产环境中随意模仿，以免带来灾难性后果。
转载请保留出处: www.zh-cjh.com珠海陈坚浩博客 » CSS 布局 - 浮动实例（通过使用 float 属性，可以轻松地并排浮动内容框）
作者： cjh
| 手机扫一扫，手机上查看此文章： |
一切源于价值！
其他 模板文件不存在: ./template/plugins/comment/pc/index.htm