HTML

Question

我希望有一个响应式布局，其行为如下：

BIG SCREEN（左和右 div大于250px）：内容 div应居中于 left 和正确的 div。
小屏幕：右 div的最小宽度应为250px。左 div应首先折叠，然后 content div。

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

视口= 1600px

300px | 1000px | 300像素

视口= 1500px

250px | 1000px | 250像素

视口= 1400px

150px | 1000px | 250像素

视口= 1250px

0px | 1000px | 250像素

视口= 1000px

0px | 750px | 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%;
}

Answer 1

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

视口= 1600px 25％| 50％| 25％

视口= 1500px 20％| 60％| 20％

视口= 1400px 20％| 55％| 25％

视口= 1250px display：none | 80％| 20％

视口= 1000px display：none | 75％| 25％

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

Answer 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

响应式3列布局，右列设置为最小宽度

HTML

CSS

2 个答案: