創建多行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

回答

相關問題