这是一个太基础的问题,但我网站上的 div 行为让我感到困惑。
我以前遇到过同样的问题,所以我确定我做错了什么,一贯的,或者误解了一些基本的 CSS 规则。
问题:为什么靠近站点右下角的红色 div 标签会清除其左侧的对应标签?没有适用于它的“明确”规则!
这是 html:
<div id="home-left">
<?php
echo "Some php=generated content";
?>
</div> <!-- END HOME-LEFT -->
<div id="home-right-container">
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
</div> <!-- END HOME-RIGHT-CONTAINER -->
这是相应的 CSS:
#home-left {
width:280px;
margin:0 0 0 20px;
//clear:both; /* STAY CLEAR OF THE SCROLLER-FEATHER-CONTAINER! */
}
#home-left h3 {
//font-size: 1.128571429rem;
font-size:12px;
line-height: 1.2;
font-weight: bold;
text-transform:uppercase;
margin-bottom:10px;
}
#home-left p {
margin: 0 0 24px;
margin: 0 0 1.514285714rem;
font-size:11px;
line-height: 1.5;
}
#home-right-container {
width:100px;
background:red;
float:right;
}
最佳答案
左边的 div 实际上清除了右边的对应部分。这是因为如果元素不是 float 的
,它基本上会占据整个页面宽度的边距。
两种解决方案:
- 在红框左侧的
div
中添加float: left
。 - 在下方红框左侧的
div
中添加display: inline-block
。
关于css - 即使没有设置清除属性,Div 也会清除 float ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16047291/