All geek questions in one place

Recommended fields for images (css only)

I have four fields next to the left div. These four windows will contain the image. Therefore, the requirement that the image is not available for a particular section in the next section will cover the space of this div. I did this, but got stuck setting the height.

+4
source share
3 answers

This result can be achieved with flexbox. flexboxsupport is pretty good http://caniuse.com/#feat=flexbox , although you may need to provide some backups for older versions of IE.

  • The setting display: flex;defines this as a flex container and allows you to use the flex context for children.
  • flex: 1 1 50%;is an abbreviation for flex-grow(allows you to increase an element if necessary), flex-shrink(allows you to erase an element if necessary) and flex-basis(default size for an element)
  • flex-wrap: wrap; allow items to wrap on a new line if necessary

For more information about flexboxsee 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>
Run code

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

+2
source

as a different answer, but with a different flexmode approach (without flex:1 1 50%;, still a bit wrong for the last parameter in some browser at this time):

.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;
  }
<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>
Run code

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

+1

You can use :nth-child(n), :nth-last-child(n)and :only-childto target certain items, depending on how many brothers and sisters they have. They are supported in IE9. You can also get the full width if there are two elements in the sample.

HTML

<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>

CSS

.wrapper {
  width: 80%;
  margin: 1em auto;
  overflow: hidden;
}

.wrapper div {
  float: left;
  width: 50%;
  min-height: 100px;
}

.wrapper div:nth-child(1) {
  background: #f66;
  width: 100%;
  min-height: 100px;
}

.wrapper div:nth-child(2) {
  background: #6f6;
}

.wrapper div:nth-child(3) {
  background: #66f;
}

.wrapper div:nth-child(4) {
  background: #ff6;
}

.wrapper div:only-child {
  width: 100%;
  min-height: 200px;
}

.wrapper div:nth-child(2):nth-last-child(1) {
  width: 100%;
  min-height: 100px;
}

.wrapper div:nth-child(3):nth-last-child(1) {
  width: 50%;
  min-height: 100px;
}

.wrapper div:nth-child(2):nth-last-child(2) {
  width: 50%;
  min-height: 100px;
}

.wrapper div:nth-child(1):nth-last-child(4) {
  width: 50%;
  min-height: 100px;
}

.wrapper div:nth-child(2):nth-last-child(3) {
  width: 50%;
  min-height: 100px;
}

.wrapper div:nth-child(3):nth-last-child(1) {
  width: 50%;
  min-height: 100px;
}

Codepen Example

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

+1
source

Source: https://habr.com/ru/post/1589028/

More articles:


All Articles