如何在DIV中正確對齊DIV

正如大多數人可能做的那樣，我將div分成了div。內部的div分開的左和右正確，但正確的div似乎遵循下的左格：如何在DIV中正確對齊DIV

的HTML似乎無明顯的錯誤：

.caption{ 
 
    width: 100%; 
 
    position: static; 
 
} 
 

 
.caption_left{ 
 
    position: static; 
 
    width: 65%; 
 
    background-color: #CDCDC1; 
 
    padding: 2px; 
 
    vertical-align: top; 
 
} 
 

 
.caption_right { 
 
    float: right; 
 
    width: 35%; 
 
    background-color: white; 
 
    vertical-align: top; 
 
}

<h4>[2. Previous]</h4> 
 
<div class="caption"> 
 
    <div class="caption_left"> 
 
    Left Material 
 
    </div> 
 
    <div class="caption_right"> 
 
    Right Material 
 
    </div> 
 
</div> 
 
<p>Some other stuff</p> 
 
<h4>[3. Following]</h4>

我不知道發生了什麼問題。我以前做過這個，它工作得很好。

來源

2017-05-25 Ken Ingram

試試這個

演示here

CSS：float:left在caption_left

使用box-sizing在caption_left

.caption{ 
    width: 100%; 
    position: static; 
} 

.caption_left{ 
    position: static; 
    width: 65%; 
    background-color: #CDCDC1; 
    padding: 2px; 
    vertical-align: top; 
    float: left; 
} 

.caption_right { 
    float: right; 
    width: 35%; 
    background-color: white; 
    vertical-align: top; 
} 
p { 
    clear: both; 
}

來源

2017-05-25 04:58:06

問題解決了。任何想法爲什麼或什麼是錯的？ –

@KenIngram，因爲你有'caption-left'一個塊元素，不管設置的寬度如何，它都會佔用其全部寬度。使其成爲「浮動」將使其保持爲網頁流的一部分，並將剩餘空間留給該空間中調整的其他浮動元素。 –

明白了。謝謝。 –

使用和caption_right

使用clear:both代替P：clear屬性指定元素浮動元素的哪一側不允許浮動。

.caption { 
 

 
    width: 100%; 
 
    position: static; 
 

 
} 
 

 
.caption_left { 
 

 
    float: left; 
 
    position: static; 
 
    width: 65%; 
 
    background-color: #CDCDC1; 
 
    padding: 2px; 
 
    vertical-align: top; 
 
    box-sizing: border-box; 
 

 
} 
 

 
.caption_right { 
 

 
    float: right; 
 
    width: 35%; 
 
    background-color: red; 
 
    vertical-align: top; 
 
    box-sizing: border-box; 
 

 
} 
 

 
p { 
 

 
    clear: both; 
 
\t 
 
}

<h4>[2. Previous]</h4> 
 

 

 
<div class="caption"> 
 
    <div class="caption_left"> 
 
    Left Material 
 
    </div> 
 
    <div class="caption_right"> 
 
    Right Material 
 
    </div> 
 
</div> 
 
<p>Some other stuff</p> 
 

 

 
<h4>[3. Following]</h4>

來源

2017-05-25 05:05:18 Ehsan

好的提示。謝謝。 –

如何在DIV中正確對齊DIV

回答

相關問題