1

我有一个 CSS 菜单使用这里checkbox:checked的技巧

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

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

我创建了一个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>
</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;
}
4

3 回答 3

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>

于 2016-01-29T11:25:02.467 回答
1

问题是您正在移动offset menuleft的值，这会将菜单项向左移动。如果你使用属性也会发生类似的事情，因为.250pxmargin-leftwidth:100%

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

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

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

于 2016-01-29T11:25:07.850 回答
0

根据您的 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;
}
于 2016-01-29T11:35:33.877 回答