我正在用html和css构建这个模块我想避免使用JavaScript。 为了帮助解释我正在尝试创建的内容,我附上了一张图片。
方框A - #left里面会有一张照片。
方框B - #right里面会有文字。
Box A或B都不能相互重叠。
到目前为止 - 我已经设法构建依赖于(%)的模块,并根据浏览器的宽度让它重新缩放更小或更大。但是我的打算还不太合适。
我面临的问题 -
借助于(最小宽度)将模块缩小到最小值时,框B的宽度随之缩小。这不是我想要发生的事情,Box B需要保持固定(px)宽度,而Box A重新缩放(%)宽度。
为了克服这个问题,我尝试给出Box B(px)宽度而不是(%)。这使事情变得更糟 - 现在当浏览器缩小到最小时,Box B离开视口&滚动条(x轴)接管。即使在最小的范围内,框B也需要在视口内。 有关如何使其工作的任何想法?谢谢。
Html -
<div id="outer">
<div id="left">Box A</div>
<div id="right">Box B</div>
</div>
Css -
#outer {
background-color:#830000;
margin:0px 0px 0px 0px;
max-width:815px;
min-width:518px;
position:relative;
width:100%;
z-index:1;
}
/*Box A*/
#left {
background-color:#b1b1b1;
float:left;
padding-bottom:57%;
position:absolute;
width:72%;
height:10px; /* extra 10px helps show overlap of #left onto #right*/
z-index:2;
}
/*Box B*/
/*Switch between #right(px) and #right2(%) for the two outcomes I'm getting*/
#right { /* using px - Good - the width is fixed, But - should not overlap #left */
width:229px;
background-color:#81dd27;
float:right;
padding-bottom:57%;
position:relative;
z-index:1;
}
#right2 { /*using % - Good - no overlapping, But - the width of 229px decreases*/
width:28%;
background-color:#81dd27;
float:right;
padding-bottom:57%;
position:relative;
z-index:1;
}
答案 0 :(得分:0)
“px”和“%”是一个坏主意。
使用媒体查询并为您的2列提供固定大小。
<强> HTML 强>
<div id="main">
<div class="left" id="c1">l</div>
<div class="left" id="c2">l</div>
<div class="clear"></div>
</div>
<强> CSS 强>
*{margin:0;padding:0}
.clear{clear:both;}
.left{float:left;height:300px;}
#main{width:100%;min-width:518px;}
#c1{background:red;width:72%;}
#c2{background:green;width:28%;}
@media screen and (max-width: 518px) {
#c1{width:290px;}
#c2{width:228px;}
}
我不确定能回答你的问题......