html - 如何在 DIV 中正确对齐 DIV

Question

正如大多数人可能做的那样，我将一个 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>

我不知道哪里出了问题。我以前做过，效果很好。

Answer 1

use float:left in caption_left

use box-sizing in caption_left and caption_right

use clear:both for P :The clear property specifies on which sides of an element floating elements are not allowed to float.

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