CSS 创建多行div

Create multiple rows of divs

提问by Matt

I'd like to create a 2x2 setup, consisting of 4 div elements. See my fiddlefor my test so far using inline-blockfor my display. I'd like to have "div 3" and "div 4" directly below 1 and 2, respectively. Is there a way to do this without floats?

我想创建一个 2x2 设置，由 4 个 div 元素组成。到目前为止，请参阅我的测试小提琴inline-block用于我的显示器。我想分别在 1 和 2 正下方有“div 3”和“div 4”。有没有办法在没有浮动的情况下做到这一点？

HTML:

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:

CSS：

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

回答by pmandell

Put the blocks in a container div, and give it a fixed width.

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

小提琴

回答by Michael

Assuming your divs are fixed width. Simply wrap them in a containing element, then limit the width of that element so that only two can fit on one line. This could easily be modified to fit 3 width wise, or 4 width wise or whatever you so choose for that matter.

假设您的 div 是固定宽度的。只需将它们包装在一个包含元素中，然后限制该元素的宽度，以便在一行中只能容纳两个元素。这可以很容易地修改为适合 3 个宽度，或 4 个宽度或您为此选择的任何内容。

Here is a JSFiddle assuming your boxes are 100PX wide.

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

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

http://jsfiddle.net/QQqEG/4/

CSS:

CSS：

.container { width: 210px; }

HTML:

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

回答by Christian

You can create a <div>that will contain the 2x2 divs you want.

您可以创建一个<div>包含您想要的 2x2 div。

Like this:

像这样：

HTML

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

CSS

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

see this jsFiddle

看到这个jsFiddle

回答by Ankit Khedekar

wrap the blocks that you want in the same row with a div and maybe play with their width

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

回答by marlonp33

There are tons of ways to do this. One way would be to simply ad a <br />tag between div 2 and div 3, another would to be to nest every row in a new <div>like below. It really depends on what you are planning to do.

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

回答by Top Questions

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

http://jsfiddle.net/QQqEG/7/

Like this?

像这样？

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