DIV内のDIVを正しく整列する方法

Question

ほとんどの人がそうしているように、私は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>

内部のdivは左右正しく、しかし右のdivが 下の左側のdivをたどるように思わ分割しました

私は何がうまくいかないのか分からない。私はこれを前にやったことがあり、うまくいきました。

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

使用float:leftcaption_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; 
 
\t 
 
}

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