如何在DIV中正確對齊DIV

Question

像大多數人一樣，我將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> 

我不知道怎么了。 我以前做過，而且效果很好。

Answer 1

在caption_left使用float:left

在caption_left和caption_right使用box-sizing

對P clear:both使用clear:both ：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; } 

 <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> 

Answer 2

嘗試這個

在這里演示

CSS：

.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;
}