html - 调整大小时如何创建固定的div？

Question

我有两个 div，#red width 70% 和#blue width 30%..

我想要，在调整大小时。只有红色 div 会缩小，蓝色 div 根本不会缩小。信菜单不拥挤的原因。

这是我的例子 work

[1]plnkr.co/edit/UsaphFdRzJTPO2y1GMbT?p=preview

谁能帮帮我？提前致谢

Answer 1

你有两列，一列你想保持固定宽度，另一列你想填充剩余空间并随着屏幕宽度的变化调整宽度。那么有很多可能的方法来实现这一目标。

我将向您展示一种使用 CSS Flex-box 的简单方法。

HTML:

<div class="outer">
    <div class="red"></div>
    <div class="blue"></div>
</div>

CSS:

.outer{
    display:flex;
    min-width:150px;
}
.red{
    background:red;    
    height:100px;   
    flex:1;
    min-width:50px;
}
.blue{
    width:100px;
    height:100px;
    background:blue;   

}

在 fiddle 上查看:https://jsfiddle.net/c6a66oge/3/