CSS：包装Div

Question

我使用checkbox:checked技巧here

创建了一个CSS菜单

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

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

我创建了一个JSFiddle来说明我要做的事情。

谢谢：）

修改

我做了一些实验，这是填充和大小调整的神奇组合 - 我也偶然发现了这个有用的帖子=＆gt; 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;
}

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

相反，如果增加填充，这将导致向内增量并减少父容器的宽度，如果找不到空格，则导致item元素落在下一生。

检查下面的代码片段，我在哪里更改填充值

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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;
}