创建多行div

时间:2013-05-07 14:14:26

标签: css

我想创建一个2x2设置,由4个div元素组成。到目前为止,使用inline-block查看我的fiddle我的测试用于显示。我想分别在1和2的正下方有“div 3”和“div 4”。有没有办法在没有花车的情况下做到这一点?

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

6 个答案:

答案 0 :(得分: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>

Fiddle

答案 1 :(得分:3)

假设你的div是固定宽度的。只需将它们包装在一个包含元素中,然后限制该元素的宽度,以便只有两个可以放在一行上。这可以很容易地修改为适合3宽度,或4宽度或任何你选择的那样。

这是一个JSFiddle,假设你的盒子宽100PX。

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

答案 2 :(得分: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>

答案 3 :(得分: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

答案 4 :(得分: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>

答案 5 :(得分:0)

有很多方法可以做到这一点。一种方法是简单地在div 2和div 3之间添加<br />标记,另一种方法是将每一行嵌套在新的<div>中,如下所示。这实际上取决于你打算做什么。

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

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

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

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