css div水平對齊

我有一個容器div內的四個div。 4個div應該水平對齊，但現在只有三個水平對齊。第四個div打破了下一行。css div水平對齊

這裏的HTML標記：

<div class="col-xs-3"> 
     <div id="standards"> 
      <h5><strong>My Energy Standards</strong></h5> 
     </div> 
     <div id="years"> 
      <h5><strong>My Study Periods</strong></h5> 
      <div id="col-1"></div> 
      <div id="col-2"></div> 
      <div id="col-3"></div> 
      <div id="col-4"></div> 
     </div> 
    </div>

的4個格是＃COL-1,2,3，和4

這裏的CSS標記：

#years{ 
    overflow: auto; 
} 
#col-1, #col-2, #col-3, #col-4{ 
    float: left; 
    padding-right: 5px; 
}

的圖像去爲視覺效果：

enter image description here

年份div最終將具有與標準div相同的邊界。首先，我需要弄清楚爲什麼它不做我想做的事情。謝謝你的幫助！

來源

2014-07-11 Tarang Hirani

您的父級div寬度太小而不適合4個div。你想添加一個水平滾動嗎？ – drip

嘗試增加容器的寬度20 px – practice2perfect

問題似乎與Bootstrap固有提供的列的寬度有關 –

這似乎只是被使用的HTML的一部分（通常很好），但在這種情況下，我認爲這是一個寬度問題進一步向上指定的html/css鏈，導致您的列線打破。

你需要通過你的html和css查看任何小於你正在製作的列的大小的容器，並擴大它的寬度以允許第四列正確對齊。

來源

2014-07-11 16:13:49

css div水平對齊

回答

相關問題