为了便于参考,我读了这些问题,并把它们都说清楚了:两者都是;结果造成了很多混乱,而不是解决了我的问题。
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" /> &nbsp; &nbsp; 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>

整个事情看起来是这样的:
html - 容器div水平重叠子级-LMLPHP

最佳答案

当您将元素的position设置为absolute时,您将从页面流中取出它。它将重叠流中定义的内容。你需要把div.sidebar的位置取下来,然后给它float: right
我通常不使用float,所以float: right可能不能完全满足您的需要,但它会让您更接近。

10-05 20:38
查看更多