如何使用 CSS 创建具有等距 DIV 的流体布局？

等距 DIV 的流体宽度

要实现等距 DIV 的流体布局，可以使用以下方法：使用：

CSS

#container {
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
}

这将文本对齐方式设置为“对齐”，使内容均匀分布在可用宽度上。

.box1,
.box2,
.box3,
.box4 {
  display: inline-block;
  vertical-align: top;
}

通过设置 display: inline-block，DIV 将表现为内联元素，在

.stretch {
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0
}

添加一个“拉伸”元素来填充剩余空间并将 DIV 推到所需的位置。清除字体和行高在某些浏览器中会有所帮助。

HTML

<div>

stretch 元素可确保 DIV 在流体容器中均匀且响应灵敏地分布。

以上是如何使用 CSS 创建具有等距 DIV 的流体布局？的详细内容。更多信息请关注PHP中文网其他相关文章！