7

4 つの div 要素で構成される 2x2 セットアップを作成したいと思います。これまでの私のディスプレイに使用したテストについては、私のフィドルを参照してください。inline-block「div 3」と「div 4」をそれぞれ 1 と 2 の直下に配置したいと思います。フロートなしでこれを行う方法はありますか?

HTML:

<div class = "blocks">
    div 1
</div>

<div class = "blocks">
    div 2
</div>

<div class = "blocks">
    div 3
</div>

<div class = "blocks">
    div 4
</div>

CSS:

.blocks {
    display: inline-block;
    border: solid 1px red;
    width: 100px;
}
4

6 に答える 6

11

ブロックをコンテナー div に配置し、固定幅にします。

.wrap{
    width:210px;
}

<div class='wrap'>
    <div class = "blocks">div 1</div>
    <div class = "blocks">div 2</div>
    <div class = "blocks">div 3</div>
    <div class = "blocks">div 4</div>
</div>

フィドル

于 2013-05-07T14:16:29.260 に答える
3

あなたのdivが固定幅であると仮定します。それらを含む要素でラップし、その要素の幅を制限して、2 つだけが 1 行に収まるようにします。これは、幅 3 倍、幅 4 倍、またはそのために選択したものに合わせて簡単に変更できます。

これは、ボックスの幅が 100PX であると仮定した JSFiddle です。

http://jsfiddle.net/QXqEG/4/

CSS:

.container { width: 210px; }

HTML:

<div class="container">
<div class = "blocks">
    div 1
</div>

<div class = "blocks">
    div 2
</div>

<div class = "blocks">
    div 3
</div>

<div class = "blocks">
    div 4
</div>
</div><!-- end container -->
于 2013-05-07T14:18:57.210 に答える
0

<div>必要な2x2 div を含むを作成できます。

このような：

HTML

<div id="column">
  <div class = "blocks">
    div 1
  </div>

  <div class = "blocks">
    div 2
  </div>

  <div class = "blocks">
   div 3
  </div>

  <div class = "blocks">
    div 4
  </div>
</div>

CSS

#column {
  position: absolute;
  width: 210px; height: 100%;
  border: 1px solid #000
}

このjsFiddleを参照してください

于 2013-05-07T14:20:32.577 に答える
0

http://jsfiddle.net/QXqEG/7/

このような？

<div style="width: 210px;">
    <div class = "blocks">
    div 1
</div>

<div class = "blocks">
    div 2
</div>

<div class = "blocks">
    div 3
</div>

<div class = "blocks">
    div 4
</div>
</div>
于 2013-05-07T14:17:03.530 に答える
0

同じ行に必要なブロックを div でラップし、幅で遊ぶことができます

<div class="row">
  <div class = "blocks">
     div 1
  </div>

  <div class = "blocks">
    div 2
  </div>
</div>

<div class="row">
  <div class = "blocks">
    div 3
  </div>

  <div class = "blocks">
    div 4
  </div>
</div>
于 2013-05-07T14:27:39.507 に答える