容器div与子元素水平重叠

Question

容器div与子元素水平重叠

htmlcss

3

为了参考，我已经阅读了这些问题并设置了clear:both;，结果却导致了很多混乱，而不是解决我的问题。

我的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>

整个东西看起来像这样：

- Youstay Igo

你的图片和引用使用了绝对定位...所以你应该预料到你看到的效果。 - Luís P. A.

我想让侧边栏div对齐在页面的右侧。如何在不添加绝对位置引用的情况下实现？ - Youstay Igo

你能上传一张新的图片，说明你想要什么吗？因为我不明白你的意思。这个图片会是响应式的吗？ - Luís P. A.

我希望它具有响应性，并且我想要侧边栏 div（CSS 代码中的 div.sidebar）位于页面的右边缘（无论屏幕和显示设备的分辨率如何）。这就是为什么我使用了绝对引用。 - Youstay Igo

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- CaldwellYSR · Answer 1

当您将元素的position设置为absolute时，它会脱离页面的流程。根据定义，它将覆盖在流程中的内容。您需要取消div.sidebar的定位，可能给它float:right 我通常不使用浮动，因此float:right可能无法完全满足您的需求，但它会让您更接近目标。