CSS：包装 Div

Question

我有一个 CSS 菜单，使用 checkbox:checked 技巧 here

但我的问题是，当菜单打开时，内容从父菜单的一侧溢出 div - 我如何使 divs 流畅以便环绕到下一行并互相推动？

我看过 Flexible Boxes，我以前从未使用过它们，但觉得这可能是正确的轨道。

我创建了一个 JSFiddle 来说明我正在尝试做的事情。

谢谢:)

编辑

我做了一些实验，它是填充和框大小的神奇组合 - 我也偶然发现了这个有用的 post => International box-sizing Awareness Day

编辑

HTML:

<div id="content">
<input type="checkbox" />
  <div id="container">
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
  </div>
</div>

CSS:

#content {
  width: 500px;
  background: blue;
}
  input[type="checkbox"]:checked ~ #container {
    transition: left 1s;
    left: 250px;
    }

#container {
  position: relative;
  transition: left 1s;
  left: 0px;
  width: 100%;
}

.item {
  display: inline-block;
  width: 50px;
  background: red;
  margin: 4px;
}

Answer 1

问题是您要移动整个容器，所以里面的所有东西也会移动。

您真正想要做的是移动第一个 .item。

input[type="checkbox"]:checked ~ #container .item:first-child {
  transition: margin-left 1s;
  margin-left: 250px;
}

#content {
  width: 500px;
  background: blue;
}
input[type="checkbox"]:checked ~ #container .item:first-child {
  transition: margin-left 1s;
  margin-left: 250px;
}
#container {
  position: relative;
}
.item {
  display: inline-block;
  width: 50px;
  background: red;
  margin: 4px;
}

<div id="content">

  <input type="checkbox" />

  <div id="container">

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

  </div>
</div>

Answer 2

问题是您正在移动 偏移菜单 的 left 值，这会将菜单项移动到左侧 250px。如果你使用 margin-left 属性也会发生类似的事情，因为 width:100%.

相反，如果增加padding，会导致向内递增，减少父容器的宽度，如果没有找到space，会导致item个元素落到下一个life中。

检查下面的代码片段，我正在其中更改填充值

* {
  box-sizing: border-box;
}
#content {
  width: 500px;
  background: blue;
}
input[type="checkbox"]:checked ~ #container {
  transition: padding 1s;
  padding-left: 250px;
}
#container {
  position: relative;
  transition: padding 1s;
  left: 0px;
  width: 100%;
  padding-left: 0;
}
.item {
  display: inline-block;
  width: 50px;
  background: red;
  margin: 4px;
}

<div id="content">

  <input type="checkbox" />

  <div id="container">

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

  </div>
</div>

Answer 3

根据您的 JSFiddle 示例，您必须更改几个属性：

HTML : 必须添加一行以清除浮动

<div id="content">

<input type="checkbox" />

  <div id="container">

    <div class="item">
    Hello
    </div>

    <div class="item">
Hello
    </div>

    <div class="item">
Hello
    </div>

    <div class="item">
Hello
    </div>

    <div class="item">
Hello
    </div>

    <div class="item">
Hello
    </div>

    <div class="item">
Hello
    </div>
    <div style="clear:both"></div>

  </div>
</div>

而 CSS 将是：

#content {
  width: 500px;
  background: blue;
}
  input[type="checkbox"]:checked ~ #container {
    transition: margin-left 1s;
    margin-left: 250px;
    }

#container {
  position: relative;
  transition: margin-left 1s;
  margin-left: 0px;
}

.item {
  display: inline-block;
  width: 50px;
  background: red;
  margin: 4px;
}

CSS：包装 Div

CSS: Wrapping Divs

css

box-sizing