How to mount 3 'columns' CSS tile?

Question

How to mount 3 'columns' CSS tile?

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)

0

I'm having trouble putting the mosaic of the example below into the mobile version of my site

The version in orientation:portrait should be something like this:

..........................
.          |             .
.  Img 1   |             .
.          |             .
...........|  Img 3      .
.          |             .
.          |             .
.  Img 2   |             .
..........................

And when the site is placed in landscape

I want them to stay in 3 columns like this:

  ...........................
  .      |        |         .
  .      |        |         .
  . Img1 | Img 2  | Img 3   .
  .      |        |         .      
  ...........................

On the images what size should they be?

html css img

asked by anonymous 31.01.2017 / 14:38

4 answers

Doubt with select in mysql Store HTML code in the database? [closed]

score 1 · Answer 1

I made inline for ease.

Portrait:

<div class="container1" style="width:50%;height:100px; float:left;">
  <img src="img1" style="heigth:50%;width:100%;">
  <img src="img2" style="heigth:50%;width:100%;">
</div>
<div class="container2" style="width:50%;">
  <img src="img3" style="heigth:100%;width:100%;">
</div>

Landscape:

<div class="container1" style="width:77%; height: 100px; float:left;">
  <img src="img1" style="heigth:100%;width:50%;">
  <img src="img2" style="heigth:100%;width:50%;">
</div>
<div class="container2" style="width:33%;">
  <img src="img3" style="heigth:100%;width:100%;">
</div>

Media Querie you resolve

score 0 · Answer 2

You can separate "these differences" into different .CSS files:

<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">

Or have a default file that applies to everything on your site, and have a specific condition like p pseudo-code demonstrates below:

<style>
  @media (min-width: 500px) and (max-width: 600px) {
    .oqueseraalterado {
        width: 100px;
    }
  }
</style>

score 0 · Answer 3

One way is to use flex, along with media-queries:

.container{ 
  display: flex; 
  max-width: 300px; /* Você pode trocar a largura aqui livremente */
}

.container .all, .container .last{
  display: flex;
  flex-flow: column;
}

.all, .last{ width: 100%; }

.all .image, .last .image{
  width: 100%;
}

.last .image{
  width: 200%;
}


@media(orientation: landscape){
  .container{ 
    display: block;
    max-width: initial;
  }

  .container .all, .container .last{ 
    display: inline-block; 
    width: initial;
  }

  .image{
    display: inline-block;
    width: auto !important;
    height: 300px;
  }
  
}

<div class="container">
  <div class="all">
    <img src="http://placehold.it/150x150"class="image" />
    <img src="http://placehold.it/300x300"class="image" />
  </div>
  <div class="last">
    <img src="http://placehold.it/600x600"class="image" />
  </div>
</div>

score 0 · Answer 4

Try using this CSS, use it on several projects and it works perfectly for me. You can customize with the number of columns you want.

#photos {
    line-height: 0;
   -webkit-column-count: 3;
   -webkit-column-gap:   0px;
   -moz-column-count:    3;
   -moz-column-gap:      0px;
   column-count:         3;
   column-gap:           0px;  
}

#photos img {
   width: 100% !important;
   height: auto !important;
}