我想创建一个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;
}
答案 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>
答案 1 :(得分:3)
假设你的div是固定宽度的。只需将它们包装在一个包含元素中,然后限制该元素的宽度,以便只有两个可以放在一行上。这可以很容易地修改为适合3宽度,或4宽度或任何你选择的那样。
这是一个JSFiddle,假设你的盒子宽100PX。
<强> 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)
喜欢这个吗?
<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>