Question

我想创建一个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;
}

Answer 1

将块放在容器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

Answer 2

假设你的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 -->

Answer 3

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>

Answer 4

您可以创建一个<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

Answer 5

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

Answer 6

有很多方法可以做到这一点。一种方法是简单地在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>

创建多行div

6 个答案: