如何在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>
我不知道发生了什么问题。我以前做过这个,它工作得很好。
答
试试这个
演示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;
}
答
使用和
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>
+0
好的提示。谢谢。 –
问题解决了。任何想法为什么或什么是错的? –
@KenIngram,因为你有'caption-left'一个块元素,不管设置的宽度如何,它都会占用其全部宽度。使其成为“浮动”将使其保持为网页流的一部分,并将剩余空间留给该空间中调整的其他浮动元素。 –
明白了。谢谢。 –