CSS在特定的div內聯塊后中斷

Question

我有div喜歡：

<div id="1" style="display:inline-block">MY DIV 1</div>
<div id="2" style="display:inline-block">MY DIV 2</div>
<div id="3" style="display:inline-block">MY DIV 3</div>
<div id="4" style="display:inline-block">MY DIV 4</div>
<div id="5" style="display:inline-block">MY DIV 5</div>
<div id="6" style="display:inline-block">MY DIV 6</div>

所以有了這個，我在同一行上水平對齊了6 div。

我想在第二個div之后換行，在第四個之后，我要：

My DIV 1 My DIV 2
My DIV 3 My DIV 4
My DIV 5 My DIV 6

有任何想法嗎 ？

Answer 1

試試這個：在每個奇數div之后添加<br>

$(function(){
    $('div:odd').after('<br>');
});

演示

Answer 2

您可以使用float: left使用純CSS實現此功能float: left在2n + 1 like（或奇數）之后清除並清除float：

 div { float: left; margin : 5px; } div:nth-child(2n+1) { clear: left; } 

 <div id="1" style="display:inline-block">MY DIV 1</div> <div id="2" style="display:inline-block">MY DIV 2</div> <div id="3" style="display:inline-block">MY DIV 3</div> <div id="4" style="display:inline-block">MY DIV 4</div> <div id="5" style="display:inline-block">MY DIV 5</div> <div id="6" style="display:inline-block">MY DIV 6</div> 

上面的代碼等於：

 div { float: left; margin: 5px; } div:nth-child(odd) { clear: left; } 

 <div id="1" style="display:inline-block">MY DIV 1</div> <div id="2" style="display:inline-block">MY DIV 2</div> <div id="3" style="display:inline-block">MY DIV 3</div> <div id="4" style="display:inline-block">MY DIV 4</div> <div id="5" style="display:inline-block">MY DIV 5</div> <div id="6" style="display:inline-block">MY DIV 6</div> 

參考文獻

：nth-​​child

Answer 3

內聯塊元素與標記之間定義的任何空白一起流動。 確保html標記中的html <div>標記之間沒有空格。 然后，應用以下樣式。

div {width:50%}

Answer 4

在其周圍添加一個包裝器，並為其設置寬度，並在其內部將divs設置為如下寬度：

HTML：

<div id="wrapper">  
<div id="1" style="display:inline-block width='300px'">MY DIV 1</div>
<div id="2" style="display:inline-block width='300px">MY DIV 2</div>
<div id="3" style="display:inline-block width='300px">MY DIV 3</div>
<div id="4" style="display:inline-block width='300px">MY DIV 4</div>
<div id="5" style="display:inline-block width='300px">MY DIV 5</div>
<div id="6" style="display:inline-block width='300px">MY DIV 6</div>
</div>

CSS：

#wrapper{
 width: 600px;
}