并排放置两个div

我试图将两个div并排放置：但是下面的div会向上冲。这样看：并排放置两个div

这里是我的HTML：

<div class="DSL6"> 
<h3 class="DSLLocation">DSL 6</h3> 
</div> 
<div class="DSLInformation"> 
</div> 
<div class="FTTN10"> 
<h3 class="FTTNLocation">FTTN 10</h3> 
</div> 
<div class="FTTN15"> 
<h3 class="FTTNLocation">FTTN 15</h3> 
</div> 
<div class="FTTN25"> 
<h3 class="FTTNLocation">FTTN 25</h3> 
</div> 
<div class="FTTN50"> 
<h3 class="FTTNLocation">FTTN 50</h3> 
</div>

和CSS：

.DSL6 { 
    background-color: #dbdbdb; 
    width: 250px; 
    height: 150px; 
    margin-top: 20px; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #D3D3D3; 
    float: left; 
    clear; 
} 
.DSLLocation { 
    margin-top: 60px; 
} 
.DSLInformation { 
    width: 850px; 
    height: 150px; 
    background-color: black; 
    float: left; 

} 
.FTTNLocation { 
    margin-top: 60px; 
} 
.FTTN10 { 
    background-color: #dbdbdb; 
    width: 250px; 
    height: 150px; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #D3D3D3; 
} 
.FTTN15 { 
    background-color: #dbdbdb; 
    width: 250px; 
    height: 150px; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #D3D3D3; 
} 
.FTTN25 { 
    background-color: #dbdbdb; 
    width: 250px; 
    height: 150px; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #D3D3D3; 
} 
.FTTN50 { 
    background-color: #dbdbdb; 
    width: 250px; 
    height: 150px; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #D3D3D3; 
}

我环顾四周，我尝试了不同的答案（无论在其他网站和堆栈溢出），但唉，没有发现问题。

我想要什么：

来源

2016-04-18 Thomas Hutton

'clear;'不是有效的CSS属性定义。 – amphetamachine

这是一个有效的属性，但不是属性**值** ...你想要“清除：两者;”最有可能的，或“无”，“继承”，“左”，“右”，“初始”...... –

此外，你应该显示*你想看到什么*如果你想任何人提供一个很好的答案。 –

你得到这样的结果，因为你所有的div的总宽度大于屏幕宽度。看到我的修改后的CSS，这里所有的div都是内联的。另外一个是你应该使用float: left来显示div内联。

.wrapper{ 
 
    width: 500px; 
 
} 
 
.DSL6 { 
 
    background-color: #dbdbdb; 
 
    width: 150px; 
 
    height: 150px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color: #D3D3D3; 
 
    float: left; 
 
    display: inline; 
 
} 
 
.DSLLocation { 
 
    margin-top: 60px; 
 
} 
 
.DSLInformation { 
 
    width: 300px; 
 
    height: 150px; 
 
    background-color: black; 
 
    float: left; 
 
    display: inline; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color: black; 
 

 
} 
 
.FTTNLocation { 
 
    margin-top: 60px; 
 
} 
 
.FTTN10 { 
 
    background-color: #dbdbdb; 
 
    width: 150px; 
 
    height: 150px; 
 
    border-style: solid; 
 
    float: left; 
 
    display: inline; 
 
    border-width: 1px; 
 
    border-color: #D3D3D3; 
 
} 
 
.FTTN15 { 
 
    background-color: #dbdbdb; 
 
    width: 50px; 
 
    height: 150px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    display: inline; 
 
    float: left; 
 
    border-color: #D3D3D3; 
 
} 
 
.FTTN25 { 
 
    background-color: #dbdbdb; 
 
    width: 50px; 
 
    height: 150px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    display: inline; 
 
    float: left; 
 
    border-color: #D3D3D3; 
 
} 
 
.FTTN50 { 
 
    float: left; 
 
    background-color: #dbdbdb; 
 
    width: 50px; 
 
    height: 150px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    display: inline; 
 
    border-color: #D3D3D3; 
 
}

<div class="wrapper"> 
 
<div class="DSL6"> 
 
<h3 class="DSLLocation">DSL 6</h3> 
 
</div> 
 
<div class="DSLInformation"> 
 
</div> 
 
<div class="FTTN10"> 
 
<h3 class="FTTNLocation">FTTN 10</h3> 
 
</div> 
 
<div class="DSLInformation"> 
 
</div> 
 
</div>

EDIT内容

编辑的html作为OP的要求。

来源

2016-04-18 17:27:02

谢谢，但我想黑旁边所有五行并排，所以div 1和2并排，然后在它们下面div 3和div 4并排等。有没有办法做到这一点？ –

嗨，运行我更新的代码片段。你想要这样的东西吗？ –

它仍然全部显示在内。我想要两个内联，然后在它们下面两个内联等。 –

并排放置两个div

回答

相关问题