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

Posted 2023-03-07

【中文标题】响应式 3 列布局，右列设置为最小宽度

【英文标题】：Responsive 3-Column-Layout, with a right column set to min-width

【发布时间】：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%;

【参考方案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