如何在固定大小的容器内水平对齐浮动 Div？

水平对齐浮动 div

使用固定大小且隐藏溢出的容器 div 时，水平对齐浮动 div 可能是一个挑战。默认情况下，浮动 div 在到达其父级的右边界时将换行到下一行，即使上面有可用空间也是如此。

所需外观

所需外观是一排水平的 div在容器内，防止它们缠绕成多行。带空格的内联元素：no-wrap 可以实现这一点，但它不适合浮动的块级元素。

解决方案

为了解决这个问题，您可以在具有足够宽度来容纳所有浮动 div 的容器。通过将容器和内部div的overflow属性设置为hidden，可以防止div溢出指定区域。

示例代码

#container {
  background-color: red;
  overflow: hidden;
  width: 200px;
}

#inner {
  overflow: hidden;
  width: 2000px;
}

.child {
  float: left;
  background-color: blue;
  width: 50px;
  height: 50px;
}

以上是如何在固定大小的容器内水平对齐浮动 Div？的详细内容。更多信息请关注PHP中文网其他相关文章！