如何在DIV中正确对齐DIV

正如大多数人可能做的那样，我将div分成了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>

我不知道发生了什么问题。我以前做过这个，它工作得很好。

来源

2017-05-25 Ken Ingram

试试这个

演示here

CSS：float:left在caption_left

使用box-sizing在caption_left

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

来源

2017-05-25 04:58:06

问题解决了。任何想法为什么或什么是错的？ –

@KenIngram，因为你有'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>

来源

2017-05-25 05:05:18 Ehsan

好的提示。谢谢。 –

如何在DIV中正确对齐DIV

回答

相关问题