防止 Div 在响应式布局中重叠
Prevent Divs From Overlapping In Responsive Layout
我试图防止两个并排的 div 在响应式布局中重叠。
这是我的 html:
<div class="image"><img src="images/misc/libertyXSmall.jpg"/></div>
<div class="storyWrapper">
<div class="headline">THIS IS A TEST HEADLINE TO SEE HOW EVERYTHING
WORKS ON THIS NEWS LIST PAGE!</div>
</div>
这是CSS:
body{margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px;}
.mainContainer{float:left; height:auto; width:100%; max-width:800px; }
.image{float:left; margin-top:0px; width:14.25%; height:auto;}
.storyWrapper{float:left; width:85.75%; height:auto; min-height:64px; background-color:#f6f6f6; color:#000000;transition:0.2s; }
.storyWrapper:hover{background-color:#c0c0c0; color:#ffffff;}
.headline{text-align:left; padding:6px 6px 6px 6px; font-size:11pt; font-weight:bold; font-family:Arial; text-decoration:none;}
本页的link是:http://www.rebelplanetnews.com/newsMenu3.html
如您所见,我的问题是..在调整页面大小(较小)时,右侧的文本 div 与左侧的图像 div 重叠。我需要阻止它。
问题是当 .image div 缩小时,您的实际图像并没有缩小。所以 .image div 将根据其宽度百分比进行调整,而不是其中包含的图像。如果您将 width: 100% 添加到 img 元素,图像现在将与 div 容器一起缩小,并且文本 div 不会重叠。
答案是不要在标题中使用百分比。最简单的解决方案是使用 calc
值,它可以在所有现代浏览器中使用。
以下将起作用:
div.storyWrapper {
width: calc(100% - 114px);
float: right;
}
在这里,我注意到图片的宽度是114px,将容器的宽度设置为100%减去它。
我也把容器向右浮动了。
请注意 calc
有点挑剔。特别是,您需要在 -
运算符周围使用空格:calc(100%-114px)
不起作用,至少在所有浏览器中都不起作用。
我试图防止两个并排的 div 在响应式布局中重叠。
这是我的 html:
<div class="image"><img src="images/misc/libertyXSmall.jpg"/></div>
<div class="storyWrapper">
<div class="headline">THIS IS A TEST HEADLINE TO SEE HOW EVERYTHING
WORKS ON THIS NEWS LIST PAGE!</div>
</div>
这是CSS:
body{margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px;}
.mainContainer{float:left; height:auto; width:100%; max-width:800px; }
.image{float:left; margin-top:0px; width:14.25%; height:auto;}
.storyWrapper{float:left; width:85.75%; height:auto; min-height:64px; background-color:#f6f6f6; color:#000000;transition:0.2s; }
.storyWrapper:hover{background-color:#c0c0c0; color:#ffffff;}
.headline{text-align:left; padding:6px 6px 6px 6px; font-size:11pt; font-weight:bold; font-family:Arial; text-decoration:none;}
本页的link是:http://www.rebelplanetnews.com/newsMenu3.html
如您所见,我的问题是..在调整页面大小(较小)时,右侧的文本 div 与左侧的图像 div 重叠。我需要阻止它。
问题是当 .image div 缩小时,您的实际图像并没有缩小。所以 .image div 将根据其宽度百分比进行调整,而不是其中包含的图像。如果您将 width: 100% 添加到 img 元素,图像现在将与 div 容器一起缩小,并且文本 div 不会重叠。
答案是不要在标题中使用百分比。最简单的解决方案是使用 calc
值,它可以在所有现代浏览器中使用。
以下将起作用:
div.storyWrapper {
width: calc(100% - 114px);
float: right;
}
在这里,我注意到图片的宽度是114px,将容器的宽度设置为100%减去它。
我也把容器向右浮动了。
请注意 calc
有点挑剔。特别是,您需要在 -
运算符周围使用空格:calc(100%-114px)
不起作用,至少在所有浏览器中都不起作用。