[英]CSS Overlapping div's
i have 4 div's: 我有4个div:
#centered {
position: absolute;
top: 50%;
left: 52%;
width: 500px;
height: 500px;
margin-top: -250px; /* Half the height */
margin-left: -250px; /* Half the width */
}
#container{
width:100%;
}
(left and right are in this container) (左右都在此容器中)
#left{
float:left;
width: 260px;
height: 600px;
}
#right{
float: right;
top: 50%;
width: 160px;
height: 600px;
}
the div centered is always in the center of the page, and the other two are at the sides. 居中的div始终位于页面的中心,其他两个位于页面的两侧。 using
使用
body { min-width:1150px; }
there always is a space between #centered and #right. 在#centered和#right之间总是有一个空格。 but when i shrink the page, no space is being kept between #centered and #left, causing overlap.
但是当我缩小页面时,#居中和#左之间没有保留空间,导致重叠。 How can i do this?
我怎样才能做到这一点?
You could add a guttering <div>
and adjust your positions accordingly, or you could reduce the width of #left
. 您可以添加装订线
<div>
并相应地调整位置,也可以减小#left
的宽度。 Using percentages rather than px for the width of #left
and #right
will make it smoother when resized. 在
#left
和#right
的宽度上使用百分比而不是px可以使调整大小时更加平滑。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.