图像响应框(仅限css)

时间:2015-05-20 14:40:12

标签: html css twitter-bootstrap

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

3 个答案:

答案 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;
&#13;
&#13;

JS小提琴: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

答案 1 :(得分:1)

作为另一个答案,但使用另一种flexmode方法(没有flex:1 1 50%;,此时某些浏览器中的最后一个参数仍然有点小问题):

&#13;
&#13;
.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;
&#13;
&#13;

http://codepen.io/gc-nomade/pen/WvGQMM

答案 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示例

http://codepen.io/goshdarnheck/pen/zGKvWX