Wie man Bild neben Text schwimmt und auf kleinerem Bildschirm stapelt

Question

Ich habe an einem Design gearbeitet, das mir einige Probleme bereitet hat. This is how it should look

Mein Code ist diesem Design sehr ähnlich, aber ich kann ihn nicht richtig einbauen.

Ich habe es derzeit mit einer Medienabfrage eingerichtet, um die Bilder unter dem Textabschnitt zu skalieren und zu stapeln, wenn die Bildschirmgröße kleiner wird; Während die Fenstergröße jedoch kleiner wird, werden die Bilder unter dem Text abgelegt und hinterlässt einen großen Leerraum.

Darüber hinaus gibt es bei voller Auflösung eine Lücke zwischen den Bildern und dem Text, aber ich kann nicht scheinen, sie nebeneinander zu sitzen. Gibt es etwas, was ich tun könnte, um dieses Design leichter zu erreichen?

.redText{ 
 
\t background-color: #f0f0f0; 
 
\t max-width: 400px; 
 
\t display: block; 
 
\t float: left; 
 
\t padding-left: 10%; 
 
} 
 
\t .redText h1{ 
 
\t \t font-size: 40px; 
 
\t \t color: #424242; 
 
\t \t padding: 45px 20px 40px 20px; 
 
\t } 
 
\t .redText h2{ 
 
\t \t color: #d0112b; 
 
\t \t padding: 0px 20px 40px 20px; 
 
\t \t margin-top: -66px; 
 
\t \t border-bottom: 10px solid #d0112b; 
 
\t } 
 
\t .redText p{ 
 
\t \t font-size: 18px; 
 
\t \t line-height: 24px; 
 
\t \t color: #424242; 
 
\t \t padding: 0px 20px 110px 20px; 
 
\t } 
 
.redMore a{ 
 
\t text-decoration: none; 
 
} 
 

 
.blueText{ 
 
\t background-color: #f0f0f0; 
 
\t max-width: 400px; 
 
\t display: block; 
 
\t float: right; 
 
\t padding-right: 10% 
 
} 
 
\t .blueText h1{ 
 
\t \t font-size: 40px; 
 
\t \t color: #424242; 
 
\t \t padding: 45px 20px 40px 20px; 
 
\t } 
 
\t .blueText h2{ 
 
\t \t color: #0a5587; 
 
\t \t padding: 0px 20px 40px 20px; 
 
\t \t margin-top: -66px; 
 
\t \t border-bottom: 10px solid #0a5587; 
 
\t } 
 
\t .blueText p{ 
 
\t \t font-size: 18px; 
 
\t \t line-height: 24px; 
 
\t \t color: #424242; 
 
\t \t padding: 0px 20px 110px 20px; 
 
\t } 
 
.blueMore a{ 
 
\t text-decoration: none; 
 
} 
 

 
.space{ 
 
\t float: right; 
 
} 
 

 
.wrapper{ 
 
\t overflow: hidden; 
 
} 
 

 
.redImg img{ 
 
\t float: right; 
 
\t max-width: 100%; 
 
} 
 
.blueImg img{ 
 
\t float: left; 
 
\t max-width: 100%; 
 
} 
 

 
@media screen and (max-width: 480px) { 
 
\t .redImg img{ 
 
\t \t float: none; 
 
\t \t margin-left: 0; 
 
\t \t width: auto; 
 
\t } 
 
\t .blueImg img{ 
 
\t \t float: none; 
 
\t \t margin-right: 0; 
 
\t \t width: auto; 
 
    \t } 
 
}

<div class="wrapper"> 
 
       <div class="redText"> 
 
       \t <h1>RETAIL</h1><br> 
 
        
 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet porta libero, nec efficitur neque scelerisque at. Maecenas a ligula nec ante tincidunt pellentesque in quis libero. Nulla lorem ante, pulvinar at ultricies ut, tempor vel mi.</p><br> 
 
        <div style="clear: both"></div> 
 
        
 
        <div class="redMore"> 
 
         <a href="#"><h2>LEARN MORE<span class="space">></span></h2></a> 
 
        </div> 
 
       </div> 
 
       
 
       <div class="redImg"><img src="images/work/retail.jpg"></div> 
 
      </div> 
 

 

 
      <div class="wrapper"> 
 
       <div class="blueText"> 
 
       \t <h1>INDUSTRIAL</h1><br> 
 
        
 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet porta libero, nec efficitur neque scelerisque at. Maecenas a ligula nec ante tincidunt pellentesque in quis libero. Nulla lorem ante, pulvinar at ultricies ut, tempor vel mi.</p><br> 
 
        <div style="clear: both"></div> 
 
        
 
        <div class="blueMore"> 
 
         <a href="#"><h2>LEARN MORE<span class="space">></span></h2></a> 
 
        </div> 
 
       </div> 
 
       
 
       <div class="blueImg"><img src="images/work/industrial.jpg"></div> 
 
      </div> 
 

 

 
      <div class="wrapper"> 
 
       <div class="redText"> 
 
       \t <h1>COMMERCIAL</h1><br> 
 
        
 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet porta libero, nec efficitur neque scelerisque at. Maecenas a ligula nec ante tincidunt pellentesque in quis libero. Nulla lorem ante, pulvinar at ultricies ut, tempor vel mi.</p><br> 
 
        <div style="clear: both"></div> 
 
        
 
        <div class="redMore"> 
 
         <a href="#"><h2>LEARN MORE<span class="space">></span></h2></a> 
 
        </div> 
 
       </div> 
 
       
 
       <div class="redImg"><img src="images/work/commercial.jpg"></div> 
 
      </div> 
 

 

 
      <div class="wrapper"> 
 
       <div class="blueText"> 
 
       \t <h1>HOTELS</h1><br> 
 
        
 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet porta libero, nec efficitur neque scelerisque at. Maecenas a ligula nec ante tincidunt pellentesque in quis libero. Nulla lorem ante, pulvinar at ultricies ut, tempor vel mi.</p><br> 
 
        <div style="clear: both"></div> 
 
        
 
        <div class="blueMore"> 
 
         <a href="#"><h2>LEARN MORE<span class="space">></span></h2></a> 
 
        </div> 
 
       </div> 
 
       
 
       <div class="blueImg"><img src="images/work/hotels.jpg"></div> 
 
      </div>

Answer 1

Es gibt verschiedene Wege, um Ihr Problem zu nähern:

1. Use% in der Breite Ihres Elements statt Nummer px: Gehen Sie mit 50% -50% für die Block des Bildes und des Textblocks, verwenden Sie display:inline-block, um sie nebeneinander zu setzen

2. Verwenden Sie ein CSS-Framework wie Boot Riemen oder Foudation ist media

EDIT1 -Update mit codepen ein bestes Beispiel in Ihrem Fall verwenden: http://codepen.io/thovo/pen/EKwYpq