容器div水平重叠子级
宜居旅馆
为了参考起见，我已经阅读了以下问题并设置了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" /> 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: right可能无法完全满足您的需求，但会更接近您。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
垂直和水平对齐容器中的多个div子级
- 2
防止浮动div子级不必要的水平滚动
- 3
当子级宽度设置为100％时，父div的子div仅在右侧有奇怪的重叠
- 4
使div为“重叠”容器div
- 5
Bootstrap 3：容器 Div 重叠
- 6
如何在父 div 的中间重叠位置相对的两个 flexbox 子级？
- 7
父级点击事件与子级点击事件重叠
- 8
父级点击事件与子级点击事件重叠
- 9
CSS：子级溢出时容器div上的滚动条
- 10
子可滚动容器打破了父级的 div 宽度
- 11
水平放置div，使其部分重叠
- 12
CSS：对齐表重叠DIV容器
- 13
调整大小时div容器与<p>重叠
- 14
跟随其主容器的div重叠
- 15
在容器div中将div水平居中
- 16
选择不在容器jquery中的子级
- 17
选择不在容器jquery中的子级
- 18
在Android中访问容器的子级
- 19
防止“子div”与“父div”重叠
- 20
父div需要与子div重叠
- 21
固定div与水平滚动上的相邻div重叠
- 22
在容器中水平对齐3div
- 23
水平和垂直将容器div居中
- 24
如何防止子视图重叠其父级ScrollView？
- 25
CSS - Div 始终匹配容器宽度，即使容器水平滚动
- 26
垂直和水平居中并在CSS中重叠div
- 27
垂直和水平居中，并在CSS中重叠div
- 28
重叠div通过带有clearfix mixen溢出的容器：隐藏
- 29
Bootstrap下拉菜单与容器div重叠，而不是向下推
我来说两句