河南省明港网站建设-明港网络公司-优化-制作-设计推广-明港网站建设服务中心

河南省明港网站建设-明港网络公司-优化-制作-设计推广-明港网站建设服务中心

种框格（The grid of boxes）也可以用来并排显示图像：

实例

.img-container {

  float: left;

  width: 33.33%; /* 三个框（四框使用 25%，两框使用 50%，以此类推） */

  padding: 5px; /* 如果需要在图片间增加间距 */

}

亲自试一试

等宽的框

在上例中，您学习了如何以相等的宽度并排浮动框。但是，创建具有相同高度的浮动框并不容易。不过，快速解决方案是设置一个固定的高度，如下例所示：

Box 1

Some content, some content, some content

Box 2

Some content, some content, some content

Some content, some content, some content

Some content, some content, some content

实例

.box {

  height: 500px;

}

亲自试一试

但是，这么做就失去了弹性。如果可以保证框中始终有相同数量的内容，那是可以的。但是很多时候，内容是不一样的。如果您在手机上尝试上例，则会看到第二个框的内容将显示在框的外部。这是 CSS3 Flexbox 派上用场的地方 - 因为它可以自动拉伸框使其与最长的框一样长：

实例

使用 Flexbox 创建弹性框：

Box 1 - 这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。

Box 2 - 我的高度将跟随框 1。

亲自试一试

Flexbox 的唯一问题是它在 Internet Explorer 10 或更早版本中不起作用。您可以在我们的 CSS Flexbox 章节中学习有关 Flexbox 布局模块的更多知识。

导航菜单

将 float 与超链接列表一起使用，来创建水平菜单：

实例

HomeNewsContactAbout亲自试一试

Web 布局实例

使用 float 属性完成整个 Web 布局也很常见

河南省明港网站建设-明港网络公司-优化-制作-设计推广-明港网站建设服务中心