为了便于参考,我读了这些问题,并把它们都说清楚了:两者都是;结果造成了很多混乱,而不是解决了我的问题。
Div content overlapping each other
responsive CSS divs overlap each other
CSS Divs overlapping each other
Divs overlapping
我的CSS代码:
#menudiv{ /*this is the leftmost div*/
margin:auto;
width:20%;
padding:1px;
float:left;
font-family:ubuntu;
font-size:25px;
color:#404040;
}
#content{ /*this is the middle div*/
position:relative;
}
div.sidebar{ */this is the right side div*/
position:absolute;
right:25px;
padding:5px;
font-family:verdana;
font-size:10pt;
width:300px;
border:solid 2px #a0b0c0;
display:flex;
text-align:justify;
}
因此,HTML是:
<div id="menudiv">
<img class="titleico" src="images/home.png" /> HOME<br />
<ul id="menulist">
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
</div>
<div id="content"><p>Here is some text which does not overlap with the child div anyway.</p>
<div class="sidebar"><img src="images/taoismlogo.png" width="80" height="80" />The yin-yang sign.</div>
<p>The text here (if it is long enough) overlaps on the content of sidebar div.</p>
</div>
</div>
整个事情看起来是这样的:
最佳答案
当您将元素的position
设置为absolute
时,您将从页面流中取出它。它将重叠流中定义的内容。你需要把div.sidebar的位置取下来,然后给它float: right
我通常不使用float,所以float: right
可能不能完全满足您的需要,但它会让您更接近。