如何在 DIV 内正确对齐 DIV

Question

正如大多数人可能做的那样，我将 div 分成 div 个。内部 divs 正确地左右分开，但是右边的 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

试试这个

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

Answer 2

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>

如何在 DIV 内正确对齐 DIV

How to properly Align DIV's within DIV

html

css

css-float