【问题标题】：Responsive 3-Column-Layout, with a right column set to min-width响应式 3 列布局，右列设置为最小宽度
【发布时间】：2017-03-10 16:10:37
【问题描述】：

我想要一个响应式布局，其行为如下：

大屏幕（left 和 right div 大于 250px）：content div 应该在 left 之间居中em> 和 right div。
小屏幕：right div 的最小宽度应为 250 像素。 left div 应该首先折叠，然后是 content div。

为了说明我的意思，这里有一些视口大小（数字无关紧要——我只是想演示我想要的行为）以及left、内容的相应大小 和 right div。

视口 = 1600 像素

300 像素 | 1000像素 | 300像素

视口 = 1500 像素

250 像素 | 1000像素 | 250像素

视口 = 1400 像素

150 像素 | 1000像素 | 250像素

视口 = 1250 像素

0px | 1000像素 | 250像素

视口 = 1000 像素

0px | 750像素 | 250像素

我不知道如何做到这一点。我被困在这里：

HTML

<div id="left">Left</div>
<div id="content">content</div>
<div id="right">Right</div>

CSS

body {
  min-width: 800px;
  height: 100%;
}

html {
  height: 100%;
}

div#left {
  background: #ccc;
  width: 20%;
  height: 100%;
}

div#content {
  background: #aaa;
  width: 60%;
  min-width:300px;
  height: 100%;
}

div#right {
  background: #ccc;
  width:20%;
  height: 100%;
}

【问题讨论】：

标签： html css responsive-design

【解决方案1】：

简单的方法是在不同的屏幕尺寸下更改为不同的百分比，并对其进行调整，使它们永远不会低于您想要的宽度（以像素为单位）。

视口 = 1600 像素 25% | 50% | 25%

视口 = 1500 像素 20% | 60% | 20%

视口 = 1400 像素 20% | 55% | 25%

视口 = 1250 像素 显示：无 | 80% | 20%

视口 = 1000 像素 显示：无 | 75% | 25%

如果您希望一些列保持固定大小而其他列在某些点保持流动，那将更加复杂。您需要让父 div 的内边距等于子列的宽度，然后使用负边距将列移动到父级的内边距中。

【讨论】：

【解决方案2】：

圣杯技术 (http://alistapart.com/article/holygrail)

*, *:before, *:after{
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;  
}

.column {
  float: left;
  position: relative;
  padding:20px;
}

.wrapper{
  min-width:550px;
  margin-left:0;
  margin-right:250px;  
}

.left{
  display:none; 
    background:yellow;
    margin-left: -100%;    
}

@media screen and (min-width: 1250px) {
   .wrapper{
    margin-left:150px;
  }   
  .left{
    display:block;
    width:150px;
    right: 150px;
  }  
}

.content{
  width:100%;
  background:green;  
}

.right{
  background:red;
  width:250px;
  margin-right: -250px;
}

@media screen and (min-width: 1500px) {
   .wrapper{
    margin-left:250px;
  }   
  .left{
    width:250px;
    right: 250px;
  }  
}



@media screen and (min-width: 1600px) {
   .wrapper{
    margin-left:300px;
  }   
  .left{
    width:300px;
    right: 300px;
  }  
}

<div class="wrapper clearfix">
  <div class="content column">content</div>
  <div class="left column">Left</div>
  <div class="right column">Right</div>
</div>

如果您不介意旧版浏览器的兼容性，您也可以尝试使用 flexbox

【讨论】：