如何在DIV中正确对齐DIV

Question

正如大多数人可能做的那样，我将div分成了div。 内部div正确左右分割，但是正确的div似乎跟在下面左边div：

html似乎没有明显的错误：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我无法说出出了什么问题。我以前做过这件事并且工作正常。

Answer 1

  

在float:left

中使用caption_left      

在box-sizing和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;
	
}

<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

试试这个

演示here

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