首页  >  文章  >  web前端  >  如何在固定大小的容器内水平对齐浮动 Div?

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

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-11-08 13:03:02163浏览

How Can I Align Floated Divs Horizontally Within a Fixed-Sized Container?

水平对齐浮动 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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn