並排放置兩個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

回答

相關問題