CSS简单响应设计

Question

我试图构建3个Divs。"左"中心"和右"所有浮子向左。"左"one_answers"右"div是宽度（如侧条）的固定。"中心" DIV（内容）是自动或％。当我重新尺寸浏览器时（例如60％），将右DIV推到较低的位置。如果我使用（例如中心div auto），我将"向左"div到位，"中心"div占所有剩余空间和下面的"右"div。

我需要的是，"左"one_answers"右" DIV FIX DIVENSION 250PX。"中心"填充了"左右"div之间的剩余空间。并且仅调整"中心div"宽度以变化以适合。

（注意：当然我正在使用媒体查询）这些东西对我从750px到950px有帮助。）

<style type="text/css">
#left {
float:left;
height: 200px;
width: 250px;
border: medium dashed #03F;
}
#center {
float:left;
height: 200px;
width: 60%;
border: medium solid #C00;
}
#right {
float:left;
height: 200px;
width: 250px;
border: medium dashed #0C6;
}
</style>

<div id="left">
</div>
<div id="center">
</div>
<div id="right">
</div>

Answer 1

检查以下内容：http：//jsfiddle.net/87ene/

创建wrapper并使用display:table;。然后将dislay: table-cell用于子元素：

html：

<div id="wrapper">
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
</div>

CSS：

#wrapper{
    width: 100%;
    display: table;
}
#left {
    display: table-cell;    
    height: 200px;
    width: 250px;
    border: medium dashed #03F;
}
#center {
    display: table-cell;
    height: 200px;
    border: medium solid #C00;
}
#right {
    display: table-cell;
    height: 200px;
    width: 250px;
    border: medium dashed #0C6;
}

为了响应迅速的关注，更好地使用percentage而不是fixed宽度：

小提琴：http：//jsfiddle.net/87ene/3/

Answer 2

您应该将所有div放在table tr td下，并将first和last TD给出 fix size 您想要（in％）和center至100％。

。 。

尝试以下操作：

<style type="text/css">
#left {
float:left;
height: 200px;
width: 100%;
border: medium dashed #03F;
}
#center {
float:left;
height: 200px;
width: 100%;
border: medium solid #C00;
}
#right {
float:left;
height: 200px;
width: 100%;
border: medium dashed #0C6;
}
</style>

<table style="width:100%;">
<tr>
<td style="width:20%;">
<div id="left">
</div>
</td>
<td style="width:60%;">
<div id="center">
</div>
</td>
<td style="width:20%;">
<div id="right">
</div>
</td>
</table>

这是一个演示

注意：如果要保持响应速度，则需要在%中提供所有宽度，而不是px。另外，您可以在此处获得有关媒体查询的更多详细信息

它应该帮助您！

谢谢。

Answer 3

在这样的情况下，我相信Flexbox可以处理情况最好。#center的宽度将更改以占用其余空间。

<style>
#container {
  display:flex;
  flex-flow: row nowrap;
}
#left {
  height: 200px;
  width: 250px;
  order:0;
  border: medium dashed #03F;
}
#center {
  flex:1;
  order:1;
  height: 200px;
  border: medium solid #C00;
}
#right {
  height: 200px;
  width: 250px;
  order:2;
  border: medium dashed #0C6;
}
</style>

Answer 4

您可以尝试以下方法：

小提琴：

<div id="wrapper" class="clearfix">
    <div class="div" id="left">
    </div>
    <div class="div" id="center">
    </div>
    <div class="div" id="right">
    </div>
</div>

祝你好运..