如何在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;
}