我左边有四个方框div
。这四个框将包含一个图像。因此要求是当图像不可用于特定部分时,下一部分将覆盖div
的空间。我已经这样做了,但在设定高度时卡住了。
答案 0 :(得分:2)
使用flexbox
可以实现此结果。 Flexbox
支持非常好[{3}},但您可能需要为旧版本的IE提供一些后备。
display: flex;
将此定义为弹性容器,并为其子元素启用弹性上下文flex: 1 1 50%;
是flex-grow
的简写(允许元素在需要时增长),flex-shrink
(允许元素在需要时缩小)和flex-basis
(默认大小为元素)flex-wrap: wrap;
将允许元素在必要时换行到新行有关flexbox
的详细信息,请参阅http://caniuse.com/#feat=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>
&#13;
JS小提琴: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
答案 1 :(得分:1)
作为另一个答案,但使用另一种flexmode方法(没有flex:1 1 50%;
,此时某些浏览器中的最后一个参数仍然有点小问题):
.red {
background-color: #ff0000;
}
.blue {
background-color: #F6BFBF;
}
.green {
background-color: green;
}
.black {
background-color: #CCEEFF
}
.yellow {
background-color: yellow
}
#tow {
float: left;
width: 50%;
}
#one {
overflow: hidden;
}
#four {
float: left;
width: 50%;
}
#three {
overflow: hidden;
}
.container,
.col-xs-6 {
display: flex;
flex-wrap: wrap;
}
.col-xs-6.red {
flex-direction: column;
}
.col-xs-6,
.col-xs-6 div {
flex: 1;
min-width: 50%;
}
/* if you prefer 2 cols instead 2 rows : remove hover and delete or comment */
.col-xs-6:hover div:first-child + div:last-child {
min-width: 100%;
}
.container {
margin: 0.5em auto;
border: solid;
}
p {
margin:0.25em;
}
&#13;
<div class="container">
<div class="col-xs-6 red">
<p>does height matters ?</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
</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>
<div class="container">
<div class="col-xs-6 red">
<p>does height matters ?</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
</div>
<div class="col-xs-6">
<div id="one" class="yellow">b</div>
<div id="four" class="black">c</div>
<div id="three" class="green">d</div>
</div>
</div>
<div class="container">
<div class="col-xs-6 red">
<p>does height matters ?</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
</div>
<div class="col-xs-6">
<div id="four" class="black">c hover me to set us as rows </div>
<div id="tow" class="blue">a</div>
</div>
</div>
<div class="container">
<div class="col-xs-6 red">
<p>does height matters ?</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
</div>
<div class="col-xs-6">
<div id="one" class="yellow">b</div>
</div>
</div>
&#13;
答案 2 :(得分:1)
您可以使用if [ -z "${codeDict["$STR_ARRAY[2]"]+xxx}" ]
then
echo "codeDict not contains ${STR_ARRAY[2]}"
codeDict["${STR_ARRAY[2]}"]="${STR_ARRAY[3]}"
fi
,:nth-child(n)
和:nth-last-child(n)
根据他们拥有的兄弟姐妹来定位特定元素。这些在IE9中受支持。当示例图像中有2个元素时,您也可以获得整个宽度。
<强> HTML 强>
:only-child
<强> CSS 强>
<div class="wrapper">
<div>a</div>
</div>
<div class="wrapper">
<div>a</div>
<div>c</div>
</div>
<div class="wrapper">
<div>a</div>
<div>b</div>
<div>c</div>
</div>
<div class="wrapper">
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
</div>
Codepen示例