Css 简单响应设计

我正在尝试建立3个分区。“左”、“中”和“右”都向左浮动。“左”和“右”div的宽度是固定的（如侧栏）。“中”div（内容）是自动或%。 当我重新调整浏览器的大小时，如果是（例如中心div 60%），右div会被推到较低的位置。如果我使用（例如中心div auto），我会将“左”div放在适当的位置，“中心”div会占据所有剩余的空间，而下面的“右”div会占据所有的空间

我需要的是，“左”和“右”div固定尺寸250px。“中心”一个填充“左”和“右”div之间的剩余空间。在调整大小时，仅“中心div”宽度更改为适合

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

#左{
浮动：左；
高度：200px；
宽度：250px；
边框：中虚线#03F；
}
#居中{
浮动：左；
高度：200px；
宽度：60%；
边框：中实心#C00；
}
#对{
浮动：左；
高度：200px；
宽度：250px；
边框：中虚线#0C6；
}

检查以下内容：

创建一个

wrapper

并使用

display:table；

。然后对子元素使用

dislay:table cell

：

HTML:

对于响应性问题，最好使用

百分比

而不是

固定

宽度：

小提琴：

检查此项：

创建一个

wrapper

并使用

display:table；

。然后对子元素使用

dislay:table cell

：

HTML:

对于响应性问题，最好使用

百分比

而不是

固定

宽度：

---

小提琴：

你应该把所有的

div

放在

表tr td

下，并将

第一个
和
最后一个
td设置为固定大小你想要的（单位%）和
中间
设置为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>


#左{
浮动：左；
高度：200px；
宽度：100%；
边框：中虚线#03F；
}
#居中{
浮动：左；
高度：200px；
宽度：100%；
边框：中实心#C00；
}
#对{
浮动：左；
高度：200px；
宽度：100%；
边框：中虚线#0C6；
}

这是一个

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

它应该对你有帮助

谢谢。
您应该将所有
div
放在
表tr td
下，并将
第一个
和
最后一个
td设置为确定您想要的大小（单位%），并将
中间
设置为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>


#左{
浮动：左；
高度：200px；
宽度：100%；
边框：中虚线#03F；
}
#居中{
浮动：左；
高度：200px；
宽度：100%；
边框：中实心#C00；
}
#对{
浮动：左；
高度：200px；
宽度：100%；
边框：中虚线#0C6；
}

这是一个

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

它应该对你有帮助

谢谢。
在这种情况下，我相信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>


#容器{
显示器：flex；
flex-flow：行nowrap；
}
#左{
高度：200px；
宽度：250px；
顺序：0；
边框：中虚线#03F；
}
#居中{
弹性：1；
顺序：1；
高度：200px；
边框：中实心#C00；
}
#对{
高度：200px；
宽度：250px；
顺序：2；
边框：中虚线#0C6；
}
在这种情况下，我认为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>


#容器{
显示器：flex；
flex-flow：行nowrap；
}
#左{
高度：200px；
宽度：250px；
顺序：0；
边框：中虚线#03F；
}
#居中{
弹性：1；
顺序：1；
高度：200px；
边框：中实心#C00；
}
#对{
高度：200px；
宽度：250px；
顺序：2；
边框：中虚线#0C6；
}
您可以尝试以下方法：




祝你好运。
你可以试试这个：




祝您好运。
如果不使用CSS3媒体查询来适应每个屏幕大小，您最好使用流畅的布局。即所有列的基于百分比的大小，否则在小型设备上，您的中心列将被压扁。您是否使用媒体查询？如果不使用CSS3媒体查询来适应每个屏幕大小，您最好使用流畅的布局。即所有列的基于百分比的大小，否则在小型设备上，您的中心列将被压扁。您是否使用媒体查询？我看不出这对移动设备有效，中心列将被压扁。@luke2012我同意您的意见，但这正是要求的。@tsterker这看起来太错误了，可能更好从此人那里获取更多信息，而不仅仅是向他们提供不充分的修复。当有人说responsive时，我确信他们希望它能在较小的设备上工作，但这不会发生。@luke2012我很抱歉，我错过了responsive标题。我只是读了他写的关于
修复的
左和右divs的内容，这在ti上确实是矛盾的tle.@luke2012由于OP没有进一步指定除灵活中心之外的任何期望响应行为，因此提供假设任意用例的答案是错误的。因此，从这个意义上说，答案非常精确。尽管我同意指出这种方法的问题是好的，但我认为你甚至不能在移动设备上有效地使用三栏式设计。我看不出这对移动设备有效，中间的栏会被压扁。@luke2012我同意你的观点，但这是我们要求的。@tsterker这似乎是错误的，也许从这个人那里得到更多信息比仅仅给他们智慧要好这是一个不充分的解决方案。当有人说“响应式”时，我肯定他们希望它能在更小的设备上工作，这将
<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>

<div id="wrapper" class="clearfix">

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

</div>