MrMurphy: Bilder anordnen

Beitrag lesen

Hallo,

dann biete ich dir als Lösung Flexbox an. Das entscheidende CSS lautet schlicht

  
   @media all {  
      article {  
         display: -webkit-box;  
         display: -webkit-flex;  
         display: -ms-flexbox;  
         display: flex;  
      }  
      section {  
         padding-left: 0.5rem;  
         padding-right: 0.5rem;  
         -webkit-flex-basis: 33.33%;  
         -ms-flex-preferred-size: 33.33%;  
         flex-basis: 33.33%;  
      }  
      img {  
         display: block;  
         margin-bottom: 1rem;  
      }  
   }  
   @media only screen and (max-width: 500px) {  
      article {  
         display: block;  
      }  
      section {  
         padding-left: 0.5rem;  
         padding-right: 0.5rem;  
         width: 100%;  
      }  
   }  
  

Soweit ich verstanden habe kommt es dir darauf an, das die Bilder ohne weitere Beschreibung untereinander angeordnet sind. Deshalb habe ich mal eine Beispielseite mit verschieden großen Bildern erstellt und zur Info auch gleich etwas Responsive Design (bei unter 500px Fensterbreite) eingebaut.

Und lass bloß die unnötigen DIVs weg.

http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_08_07_sturmverliebt_01_bilder_dreispaltig.html

Gruss

MrMurphy