2017-08-18 2 views
-1

Ich frage mich, ob irgendwie eine Lösung für meine Kopfschmerzen wissen, ich möchte das dritte Bild unter dem ersten sein. Aber da die zweite Bildhöhe größer ist als die erste, erzeugt sie einen leeren Raum.Richten Sie Bilder aufeinander aus

Wie es enter image description here

-Code jetzt aussieht:

Jedes Bild Codeblock sieht gleich

column_1_5_of_3 { 
 
    width: 100%; 
 
} 
 

 
col_nomargin { 
 
    display: inline-block; 
 
    position: relative; 
 
    float: left; 
 
    margin: 0% 0% 0.25% 0.25%; 
 
    overflow: hidden; 
 
} 
 

 
portimg { 
 
    width: 100%; 
 
    height: auto; 
 
    margin: 0% 0 0% 0%; 
 
    transition: .5s ease; 
 
    display: block; 
 
} 
 

 
column_1_5_of_3 { 
 
    width: 100%; 
 
} 
 

 
col_nomargin { 
 
    display: inline-block; 
 
    position: relative; 
 
    float: left; 
 
    margin: 0% 0% 0.25% 0.25%; 
 
    overflow: hidden; 
 
} 
 

 
portimg { 
 
    width: 100%; 
 
    height: auto; 
 
    margin: 0% 0 0% 0%; 
 
    transition: .5s ease; 
 
    display: block; 
 
}
<div class="col_nomargin column_1_of_3"> 
 
    <img class="portimg" src="" alt="">

Wenn es etwas gibt, ich habe verpasst oder eine Fragen. Bitte erzählen

Danke für all die Hilfe

+1

Willkommen bei Stack-Überlauf. Bitte überprüfen Sie dies: [Wie stelle ich eine gute Frage?] (Http://stackoverflow.com/help/how-to-ask) –

+2

Werfen Sie einen Blick auf diese -> https://css-tricks.com/seamless -responsive-photo-grid/ –

+0

Verwenden Sie dieses jquery-Plugin, es richtet Ihr div automatisch aus. plugin url: http://www.bestjquery.com/?uoa1gOVh –

Antwort

0

.gal { 
 
\t 
 
\t 
 
\t -webkit-column-count: 3; /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 3; /* Firefox */ 
 
    column-count: 3; 
 
\t 
 
\t 
 
\t } \t 
 
\t .gal img{ width: 100%; padding: 7px 0;} 
 
@media (max-width: 500px) { 
 
\t \t 
 
\t \t .gal { 
 
\t 
 
\t 
 
\t -webkit-column-count: 1; /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 1; /* Firefox */ 
 
    column-count: 1; 
 
\t 
 
\t 
 
\t } 
 
\t \t 
 
\t }
<div class="container"> 
 

 

 
<h1>Pure Css Responsive Masonry Gallery</h1> 
 
<div class="col-md-12"> 
 
<div class="row"> 
 
<hr> 
 

 
\t <div class="gal"> 
 
\t 
 
\t <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
\t 
 
\t \t <img src="https://preview.ibb.co/mWpE3Q/2.jpg" alt=""> 
 
\t \t 
 
\t \t \t <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
\t \t \t 
 
\t \t \t <img src="https://preview.ibb.co/mysOxk/3.jpg" alt=""> 
 
\t \t \t 
 
\t \t \t 
 
\t \t 
 
\t \t \t <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
\t \t \t \t <img src="https://preview.ibb.co/mWpE3Q/2.jpg" alt=""> 
 
\t \t \t 
 
\t \t \t <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
\t \t \t 
 
\t \t \t \t <img src="https://preview.ibb.co/mysOxk/3.jpg" alt=""> 
 
\t \t \t 
 
\t \t \t \t <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
\t \t \t \t <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""><img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
\t \t \t \t <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
\t \t \t \t 
 
\t \t \t \t <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
\t \t \t \t <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
\t \t \t \t <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
\t \t \t \t \t <img src="https://preview.ibb.co/mysOxk/3.jpg" alt=""> 
 
\t \t \t 
 
\t \t \t \t \t \t <img src="https://preview.ibb.co/mysOxk/3.jpg" alt=""> 
 
\t \t \t 
 
\t \t \t \t \t \t <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
\t \t \t \t <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
\t \t \t \t <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
\t \t \t \t <img src="https://preview.ibb.co/mWpE3Q/2.jpg" alt=""> 
 
\t \t \t \t 
 
\t </div> 
 
\t 
 
</div> 
 
</div> 
 
</div>

versuchen diesen Code

+0

Bitte fügen Sie einige Informationen, was Sie getan haben, warum es funktioniert usw. –

0

ich eine Klasse mit dem Namen hinzugefügt haben .photos und hinzugefügt/entfernt .portimg einige CSS. Die Eigenschaft column-count gibt die Anzahl der Spalten an, in die ein Element unterteilt werden soll, und die column-gap-Eigenschaft gibt die Lücke zwischen den Spalten an.

Weitere Informationen finden Sie unter CSS-Tricks.

.column_1_5_of_3 { 
 
    width: 100%; 
 
} 
 

 
.col_nomargin { 
 
    display: inline-block; 
 
    position: relative; 
 
    float: left; 
 
    margin: 0% 0% 0.25% 0.25%; 
 
    overflow: hidden; 
 
} 
 

 
.portimg { 
 
    /* Just in case there are inline attributes */ 
 
    width: 100% !important; 
 
    height: auto !important; 
 
} 
 

 
.column_1_5_of_3 { 
 
    width: 100%; 
 
} 
 

 
.photos { 
 
    /* Prevent vertical gaps */ 
 
    line-height: 0; 
 
    
 
    column-count:   5; 
 
    column-gap:   2px; 
 
} 
 

 
.col_nomargin { 
 
    display: inline-block; 
 
    position: relative; 
 
    float: left; 
 
    margin: 0% 0% 0.25% 0.25%; 
 
    overflow: hidden; 
 
} 
 

 
.portimg { 
 
    transition: .5s ease; 
 
    display: block; 
 
    margin: 2px; 
 
}
<div class="col_nomargin column_1_of_3 photos"> 
 
    <img class="portimg" src="http://via.placeholder.com/100x300" alt=""> 
 
    <img class="portimg" src="http://via.placeholder.com/100x200" alt=""> 
 
    <img class="portimg" src="http://via.placeholder.com/100x300" alt=""> 
 
    <img class="portimg" src="http://via.placeholder.com/100x400" alt=""> 
 
    <img class="portimg" src="http://via.placeholder.com/100x300" alt=""> 
 
    <img class="portimg" src="http://via.placeholder.com/100x100" alt=""> 
 
    <img class="portimg" src="http://via.placeholder.com/100x300" alt=""> 
 
    <img class="portimg" src="http://via.placeholder.com/100x600" alt=""> 
 
    <img class="portimg" src="http://via.placeholder.com/100x200" alt=""> 
 
    <img class="portimg" src="http://via.placeholder.com/100x600" alt=""> 
 
    <img class="portimg" src="http://via.placeholder.com/100x100" alt=""> 
 
    <img class="portimg" src="http://via.placeholder.com/100x900" alt=""> 
 
</div>

Verwandte Themen