html - 容器 div 水平重叠子项

Question

为了引用起见，我已经阅读了这些问题并设置了 clear:both;最终造成了很多困惑，而不是解决了我的问题。

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>

整体看起来是这样的:

Answer 1

当您将元素的 position 设置为 absolute 时，您会将其从页面流中移除。根据定义，它将与流中的内容重叠。您需要取消 div.sidebar 的定位并可能给它 float: right

我通常不使用 float ，所以 float: right 可能不会完全满足您的需要，但它会让您更接近。