html - 图像的响应框(仅限 css)

Question

我在左边 div 旁边有四个框。这四个框将包含一个图像。所以要求是当特定部分的图像不可用时，下一部分将覆盖该 div 的空间。我已经这样做了，但在设置高度时卡住了。

Answer 1

这个结果可以通过使用flexbox来实现。 Flexbox 支持非常好 http://caniuse.com/#feat=flexbox尽管您可能需要为旧版本的 IE 提供一些回退。

• 设置 display: flex; 将其定义为 flex 容器并为其子元素启用 flex 上下文
• flex: 1 1 50%; 是 flex-grow 的简写(允许元素在需要时增长)，flex-shrink (允许元素在需要时收缩)和 flex-basis(元素的默认大小)
• flex-wrap: wrap; 必要时允许元素换行

有关 flexbox 的更多信息，请参阅 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.red {
    background-color: #ff0000;
}
.blue {
    background-color: #F6BFBF;
}
.green {
    background-color: green;
}
.black {
    background-color: #CCEEFF
}
.yellow {
    background-color: yellow
}
.container {
    display: flex;
    flex: 1 1 50%;
}
.col-xs-6 {
    display: flex;
    flex: 1 1 50%;
    flex-wrap: wrap;
}
.col-xs-6 div {
    flex: 1 1 50%;
}

<strong>4 divs</strong>
<div class="container">
    <div class="col-xs-6 red">a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/></div>
    <div class="col-xs-6">
        <div id="tow" class="blue">a</div>
        <div id="one" class="yellow">b</div>
        <div id="four" class="black">c</div>
        <div id="three" class="green">d</div>
    </div>
</div>
<strong>3 divs</strong>
<div class="container">
    <div class="col-xs-6 red">a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/></div>
    <div class="col-xs-6">
        <div id="tow" class="blue">a</div>
        <div id="one" class="yellow">b</div>
        <div id="four" class="black">c</div>
    </div>
</div>
<strong>2 divs</strong>
<div class="container">
    <div class="col-xs-6 red">a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/></div>
    <div class="col-xs-6">
        <div id="tow" class="blue">a</div>
        <div id="one" class="yellow">b</div>
    </div>
</div>
<strong>1 div</strong>
<div class="container">
    <div class="col-xs-6 red">a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/></div>
    <div class="col-xs-6">
        <div id="tow" class="blue">a</div>
    </div>
</div>

JS fiddle : http://jsfiddle.net/btw8ceyy/1/