排列多個div並排

我想排列多個div。我已經搜索了stackoverflow和基於我的代碼：How to align two divs side by side using the float, clear, and overflow elements with a fixed position div/。排列多個div並排

我打得與它周圍，並結束了這個CSS：

.frontpageBoxLeft, .frontpageBoxRight { 
    border-radius: 5px; 
    border-color: lightgrey; 
    background: #ffffff; 
    height: 150px; 
} 

.frontpageBoxLeft { 
    margin-bottom:15px; 
    width: 750px; 
    min-height: 100px; 
    position: relative; 
} 

.frontpageBoxRight { 
    width: 320px; 
    float: right; 
    height: 300px; 
    position: relative; 
    vertical-align: top; 
} 

.frontpageBoxContainer { 
    width: 70%; 
    height: 500px; 
    position: absolute; 
    top:0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
}

和這個網站：

<div class="frontpageBoxContainer"> 
<p class="newsfeedheadline">NEWS FEED</p> 
<hr class="hrstarter"> 
<div class="frontpageBoxLeft" id="1"> 
    et eksempel på en kasse1 
</div> 
<div class="frontpageBoxLeft" id="2"> 
    et eksempel på en kasse2 
</div> 
<div class="frontpageBoxLeft" id="3"> 
    et eksempel på en kasse3 
</div> 
<div class="frontpageBoxRight"> 
    et eksempel på en anden kasse 
</div> 
</div>

結果是這樣的：

div alignment

我想能夠把多個div放在左邊，而多個div放在右邊。現在，當iam只使用一個右側和一個左側div時，代碼工作正常，但是具有多個div時，它的行爲與圖片中相似。

此致敬禮。

來源

2016-10-19 Tony

.frontpageBoxLeft, 
 
.frontpageBoxRight { 
 
    border-radius: 5px; 
 
    border-color: lightgrey; 
 
    background: #ffffff; 
 
    height: 150px; 
 
} 
 

 
.left-container { 
 
    float: left; 
 
    width: 750px; 
 
} 
 

 
.frontpageBoxLeft { 
 
    margin-bottom: 15px; 
 
    width: 750px; 
 
    display: inline-block; 
 
    min-height: 100px; 
 
    float: right; 
 
    position: relative; 
 
    outline: 1px solid red; 
 
} 
 

 
.frontpageBoxRight { 
 
    width: 540px; 
 
    float: right; 
 
    height: 300px; 
 
    position: relative; 
 
    vertical-align: top; 
 
    outline: 1px solid red; 
 
} 
 

 
.frontpageBoxContainer { 
 
    width: 1300px; 
 
    height: 500px; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
}

<div class="frontpageBoxContainer"> 
 
<p class="newsfeedheadline">NEWS FEED</p> 
 
<hr class="hrstarter"> 
 
    <div class="left-container"> 
 
    <div class="frontpageBoxLeft" id="1"> 
 
    et eksempel på en kasse1 
 
</div> 
 
<div class="frontpageBoxLeft" id="2"> 
 
    et eksempel på en kasse2 
 
</div> 
 
<div class="frontpageBoxLeft" id="3"> 
 
    et eksempel på en kasse3 
 
</div> 
 
    </div> 
 

 
<div class="frontpageBoxRight"> 
 
    et eksempel på en anden kasse 
 
</div> 
 
</div>

來源

2016-10-19 08:10:38

請你分享一下你的代碼，已經採取了上面的截圖？它看起來像我所需要的，但是當我嘗試使用您提供的CSS時，我得不到相同的結果。 – Tony

http://codepen.io/valeri879/pen/yaQYVK 這裏是代碼 –

謝謝你的作品完美！ – Tony

把float: left改爲.frontpageBoxLeft選擇器就能解決問題。

來源

2016-10-19 08:02:30

嘗試設置frontpageBoxContainer到position:relative
浮動左邊和右邊的容器。
集left或right偏移到您要對齊的div。

來源

2016-10-19 08:06:00 jukisu

我想這可能會幫助你

div{ 
 
    width: 48%; 
 
    height: 100px; 
 
    background-color: red; 
 
    float: left; 
 
    margin: 1%; 
 
}

<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div>

或這一個

div{ 
 
    width: 23%; 
 
    height: 100px; 
 
    background-color: red; 
 
    float: left; 
 
    margin: 1%; 
 
}

<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div>

來源

2016-10-19 08:10:27 Rahul

這工作得很好，偶數在每邊的div的，但對我來說，我需要更多的div支持左側，妥善20-30 div的只有1個或兩個div在右側。 – Tony

如果我想讓它保持正確而不去下一行？ https://stackoverflow.com/questions/44119889/how-to-put-multiple-divs-side-by-side-and-not-go-to-the-next-line – Si8

排列多個div並排

回答

相關問題