0

我正在用 html 和 css 构建这个模块，我想避免使用 JavaScript。为了帮助解释我正在尝试创建的内容，我附上了一张图片。

在此处输入图像描述

Box A - #left 里面会有一张图片。
方框 B - #right 里面会有文字。
框 A 或 B 都不能相互重叠。

到目前为止 - 我已经成功地构建了依赖 (%) 的模块，并让它根据浏览器的宽度重新调整大小。但它还没有完全按照我的意图工作。

我面临的问题 -

当模块在 (min-width) 的帮助下缩小到最小时，框 B 的宽度也随之缩小。这不是我打算发生的，框 B 需要保持固定 (px) 宽度，而框 A 重新缩放 (%) 宽度。

为了克服这个问题，我尝试给 Box B (px) 宽度而不是 (%)。这让事情变得更糟——现在当浏览器缩小到它的最小框 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;
}
4

1 回答 1

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;}
}

我不确定这是否能回答你的问题......

http://codepen.io/ColoO/pen/njLyD

于 2013-11-14T08:55:01.007 回答