创建多行div

我想创建一个2x2设置，由4个div元素组成。至于我的测试，请参阅我的fiddle，以便我的显示器使用inline-block。我想分别在1和2的下方分别有“div 3”和“div 4”。有没有办法做到这一点没有浮动？创建多行div

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

来源

2013-05-07 Matt

固定大小或...？ – Aquillo 2013-05-07 14:15:46

你有设置的宽度永远不会改变，或者他们是否有反应？ – Michael 2013-05-07 14:15:55

是的，固定宽度。 – Matt 2013-05-07 14:16:17

放入容器中的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

来源

2013-05-07 14:16:29 pmandell

这可能会导致布局混乱，因为您在右侧留下空白。 – Aquillo 2013-05-07 14:28:41

http://jsfiddle.net/9wsqK/ – 2016-04-23 11:06:55

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-07 14:17:03

您的jsFiddle链接与问题中的链接相同。您必须点击“叉子”进行更改以获得新的链接。 – 2013-05-07 14:19:17

已更新...谢谢 – 2013-05-07 14:19:47

假设你的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-07 14:18:57 Michael

您可以创建一个<div>将包含你想要的2×2的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-07 14:20:32 Christian

包你在不想块他与一个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-07 14:27:39

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

来源

2013-05-07 14:36:38 marlonp33

回答

相关问题