css - 响应式 CSS 方法

Question

下图是我想要得到的说明。第 1 个数字代表较长的宽度，第 2 个数字代表较短的宽度。所有红色块都停留在左右位置，黄色块应跟随容器的宽度。

1：http: //i.stack.imgur.com/6bHTo.jpg

这是我目前的方法

/* the one with black border :) */
.container{
    position: relative;
}
/* red blocks have auto heights depends on its content */
.red{
    position: absolute;
    top: 0;
    width: 100px;
}
.red-left{
    left:0;
}
.red-right{
    right:0;
}
/* yellow block follow the width of the container but should leave spaces for the left and right */
.yellow{
    margin: 0 110px;
}

我几乎对这种方法感到满意，但是，我注意到当红色块高于容器时，容器不会自动跟随其内容的高度。我知道不可能自动调整容器高度，因为孩子们处于绝对位置。:)

Answer 1

你考虑过使用 CSS3 Flex Box 吗？它会是这样的：

HTML：

<div class="container">
   <div class="red red-left">red-left<br>red-left<br>red-left<br>red-left<br>red-left</div>
   <div class="yellow">yellow<br>yellow</div>
   <div class="red red-right">red-right</div>
</div>

和CSS：

.container{
  display: -webkit-box;
  -webkit-box-orient: horizontal;

  display: -moz-box;
  -moz-box-orient: horizontal;

  display: box;
  box-orient: horizontal;        
}

.red{
    background-color:red;  
    width:100px; 
}

.yellow{     
    background-color:yellow;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
}

​​看看这个小提琴：

http://jsfiddle.net/lucaslazaro/sjYNy/

编辑：

要了解有关 Flex Box 的更多信息，我推荐此快速教程：http ://www.html5rocks.com/pt/tutorials/flexbox/quick/

Answer 2

我自己的演示，使其更容易。

我们在这里可以看到内容与容器重叠。

Answer 3

也许这有帮助：

HTML

<div class="container">
    <div class="red red-left">red-left<br>red-left<br>red-left</div>
    <div class="yellow">yellow<br>yellow</div>
    <div class="red red-right">red-right</div>
</div>

​</p>

​CSS

/* the one with black border :) */
.container{
    position: relative;
}
/* red blocks have auto heights depends on its content */
.red{
    position: absolute;
    top: 0;
    width: 100px;
    background:red;
    height:auto
}
.red-left{
    left:0;
}
.red-right{
    right:0;
}
/* yellow block follow the width of the container but should leave spaces for the left and right */
.yellow{
    margin: 0 110px;
    background:yellow
}

​</p>

​</p>

​​<strong> DEMO

Answer 4

使用：

div {
    display: table;
    width: 100%;
    table-layout: fixed;
}

div > div {
    display: table-cell;
}

查看完整代码：

http://jsfiddle.net/BF6La/