Question

我有以下代码：

HTML：

<div class="main">
    <div class="myClass1">
    </div>
    <div class="myClass2">
    </div>
    <div class="myClass3">
    </div>
    <div class="myClass4">
    </div>
</div>

CSS：

.main {
    width:100%;
    height:100px;
    background-color:#000;
}

.myClass1 {
    height: 100px;
    width:200px;
    background-color: blue;
    display: inline-block;
}

.myClass2 {
    height: 100px;
    width:200px;
    background-color: yellow;
    display: inline-block;
}

.myClass3 {
    height: 100px;
    width:200px;
    background-color: red;
    display: inline-block;
}

.myClass4 {
    height: 100px;
    width:200px;
    background-color: yellow;
    display: inline-block;
}

JSFiddle：http://jsfiddle.net/a2whdvmw/

我希望它们都与main的右边对齐，但是当我调整窗口大小时，某些时候myClass1会到达main的左边缘，我想要{{1从那一点开始在myClass3和myClass2之间挤压。

myClass4，myClass1和myClass2都有固定的尺寸。因此，当我调整窗口大小时，我想要更改的唯一宽度是myClass4。

是否可以仅使用CSS执行此操作？

Answer 1

使用flex布局。

为flex: 0 1 200px指定.myClass3。这将导致它不会增长，但仍允许从200px的弹性基宽度缩小。对于其余部分，请指定flex: 0 0 200px以禁止展开和缩小，有效修复200px处的内容，因为.myClass3会随着可用空间的减少而缩小。

演示小提琴：http://jsfiddle.net/abhitalks/a2whdvmw/1/

演示代码段

＆＃13;

.main { width:100%; height:100px; background-color:#000; display: flex;}

.myClass1 {
    flex: 0 0 200px;
    height: 100px; background-color: blue;
}

.myClass2 {
    flex: 0 0 200px;
    height: 100px; background-color: yellow;
}

.myClass3 {
    flex: 0 1 200px;
    height: 100px; background-color: red;
}

.myClass4 {
    flex: 0 0 200px;
    height: 100px; background-color: yellow;
}

＆＃13;

<div class="main">
    <div class="myClass1"></div>
    <div class="myClass2"></div>
    <div class="myClass3"></div>
    <div class="myClass4"></div>
</div>

＆＃13;

当窗口调整大小时，在两个其他div之间挤压div

1 个答案: