构建可扩展/流体2列矩形模块

Question

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

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

到目前为止 - 我已经设法构建依赖于（％）的模块，并根据浏览器的宽度让它重新缩放更小或更大。但是我的打算还不太合适。

我面临的问题 -

借助于（最小宽度）将模块缩小到最小值时，框B的宽度随之缩小。这不是我想要发生的事情，Box B需要保持固定（px）宽度，而Box A重新缩放（％）宽度。

为了克服这个问题，我尝试给出Box B（px）宽度而不是（％）。这使事情变得更糟 - 现在当浏览器缩小到最小时，Box B离开视口＆amp;滚动条（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;
}

Answer 1

“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