排列多个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并排

回答

相关问题