代码之家  ›  专栏  ›  技术社区  ›  ProtectedVoid

CSS宽度自动和向左浮动-允许溢出

  •  3
  • ProtectedVoid  · 技术社区  · 6 年前

    我有一个容器 div 具有属性的 width: auto; . 此容器具有具有属性的子元素 float: left; . 正常行为是连续对齐所有元素,直到一个元素溢出容器 部门 . 在这种情况下,该子元素将放置在其他子元素下。我试图强制子元素扩展容器 部门 即使它溢出。我希望所有子元素都对齐。

    我怎样才能做到这一点?

    1 回复  |  直到 6 年前
        1
  •  4
  •   Cheslab    6 年前

    由于float元素不会增加父元素的宽度,因此可能需要创建它们 display: inline-block 然后您可以添加 white-space: nowrap 给父母。 显示:内联块 如果需要为父对象使用不透明背景,则此选项也很有用。

    .container {
      background-color: yellow;
      white-space: nowrap;
      font-size: 0;
      margin: 5px 0;
    }
    .second.container {
      display: inline-block;
    }
    .container > div {
      display: inline-block;
      width: 200px;
      height: 50px;
      background-color: firebrick;
      margin: 10px;
    }
    <div class="container">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="second container">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>