1

ここcheckbox:checkedでトリックを使用したCSSメニューがあります

しかし、私の問題は、メニューが開いているときに、コンテンツが親の側面からオーバーフローすることです.sを流動的にして、次の行にラップアラウンドし、互いに押し合うようdivにするにはどうすればよいですか?div

私はフレキシブル ボックスを見てきましたが、これまで使用したことはありませんでしたが、これは適切な方法である可能性があると感じています。

私がやろうとしていることを示すJSFiddleを作成しました。

ありがとうございました ：）

編集

私はいくつかの実験を行ってきましたが、これはパディングとボックスのサイジングの魔法の組み合わせです - また、この便利な投稿に出くわしました => 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;
}
4

3 に答える 3

0

JSFiddle の例によると、いくつかのプロパティを変更する必要があります。

HTML : フローティングをクリアするには、1 行追加する必要があります

<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 に答える