7

我想创建一个 2x2 设置，由 4 个 div 元素组成。到目前为止，请参阅我的小提琴inline-block用于我的测试。我想分别在 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;
}
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 是固定宽度。只需将它们包装在一个包含元素中，然后限制该元素的宽度，以便只有两个可以放在一行上。这可以很容易地修改为适合 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 -->
于 2013-05-07T14:18:57.210 回答
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>包含您想要的 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

用 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 回答
0

有很多方法可以做到这一点。一种方法是简单地<br />在 div 2 和 div 3 之间添加一个标签，另一种方法是将每一行嵌套在一个新的<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>
于 2013-05-07T14:36:38.270 回答