[英]How to properly Align DIV's within DIV
As most people likely do, I have a div split into divs. 像大多数人一样,我将div划分为div。 The internal divs split left and right properly, however the right div seems to follow under the left div:
内部的div分开的左,右正确,但正确的div似乎左格下遵循:
The html seems free from obvious errors: 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>
I can't tell what's going wrong. 我不知道怎么了。 I've done this before and it worked fine.
我以前做过,而且效果很好。
use
float:left
incaption_left
在
caption_left
使用float:left
use
box-sizing
incaption_left
andcaption_right
在
caption_left
和caption_right
使用box-sizing
use
clear:both
forP
:The clear property specifies on which sides of an element floating elements are not allowed to float.对
P
clear:both
使用clear:both
: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>
Try this 尝试这个
CSS: 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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.