如何將div並排放置？

-3

所以我無法將兩個div side和map彼此相鄰。我目前有：如何將div並排放置？

CSS

.col-md-8 { float: right; clear: right;} 
.col-md-4 { float: left; clear: left; }

HTML

<div class='container-fluid'> 
    <div class='row'> 
     <div style="width: 700px;" class='col-md-4' id="side"> 
     </div> 

     <div class='col-md-8' id="try"> 
      <div id="map" style="width: 1000px; height: 800px"> 
      </div> 
     </div> 
    </div> 
</div>

基本上，我想的div #side和#map是彼此相鄰...所以在我不會把#side和#try並排嗎？所以我試着用CSS，float: right和float: left？我無法弄清楚什麼是錯的。任何幫助將不勝感激，謝謝！

來源

2016-04-04 ocean800

你有一方，並嘗試作爲ID的，並稱他們在CSS中的類。如果你想把它們保存爲id，你需要將它改爲'＃try'和'＃side'在css中。 – ajmajmajma

你有沒有試過讓它們都向左浮動？不要忘記清理後的浮標。 – James

@ajmajmajma謝謝！愚蠢的新手錯誤...所以這將是正確的方式來做到這一點，對嗎？ – ocean800

您正在混合幾種不同的風格屬性。

您已定義CSS classes，但正在嘗試使用它們來定位Element Id attribute。

.try { float: right;} 
.side { float: left; }

您可以更改CSS來定位元素ID。

#try { float: right;} 
#side { float: left; }

您也使用利用自舉類和已專門選擇一個用於響應佈局（使用container-fluid類）。通過將div定義爲row並給出該div列類中的元素，它們將根據總共12列適當地浮動。

最後，您通過在div上設置顯式寬度來與引導類相矛盾。你可以有1個或另一個。你不應該做到這一點。

在決定使用引導程序或使用硬編碼寬度之前，它將無法正確佈局。

來源

2016-04-04 20:43:51 whipdancer

哦，我看到謝謝你。所以默認情況下，bootstrap基本上將我的頁面分成兩半，而且因爲我對自己的寬度進行了硬編碼，所以它會干擾bootstrap，而不得不進行堆棧。 – ocean800

Bootstrap使用12列。你的第一個div設置了4列寬。你的第二個div設置爲8列寬。那是12（或更少）。他們將並排放在頁面上。 – whipdancer

我明白了，謝謝你清理我的困惑！我明顯有一個重大的概念理解問題，你清理它:) – ocean800

第一個問題是你正在與網格戰鬥。只要你沒有超過容器的寬度（你在這種情況下 - 我看到你在使用引導程序），兩個div將自動顯示內聯塊。如果你超過這個寬度，他們會堆疊。

那說 - 如果你把打破電網的方程（不要在響應列放在固定寬度） - 由端使用放置div的一面：

HTML

<div class="container"> 
    <div class = "one"></div> 
    <div class = "two"></div> 
</div>

CSS

.container div { 
    display: inline-block; 
}

來源

2016-04-04 20:44:38 Korgrue

感謝您的解釋！ – ocean800

不客氣。老實說，如果你只是刪除固定的寬度，並使用列設置你的寬度，你不會浮動div。只要每行的列數是12（或更少） - 它們中的div總是會相互浮動，除非您觸及移動斷點。另外，請記住 - 列可以嵌套。 – Korgrue

在你的榜樣，你把#map在#try -div內部，因此不可能將它們彼此相鄰地浮動。

你的代碼看起來是這樣的：

#side, 
 
#map { 
 
    float: left; 
 
    background: green; 
 
    border: 10px solid black; 
 
    width: 50px; 
 
    height: 50px; 
 
}

<div> 
 

 
    <div> 
 

 
     <div id="side"> 
 
     </div> 
 

 
     <div id="try"> 
 
      <div id="map"> 
 
      </div> 
 
     </div> 
 

 
    </div> 
 
</div>

我取消了對#map風格屬性，並添加背景，邊框，寬度和高度只能告訴你，它的工作原理。

對於引導類的使用看看whipdancers答案！

來源

2016-04-04 20:46:10

您仍在混合使用硬編碼寬度的自舉響應類。 – whipdancer

這是正確的，我沒有看這些課，當我答案時。我現在就編輯它！ –

@ user6149228非常感謝你的例子！ – ocean800

如何將div並排放置？

回答

相關問題