Как плавать изображение рядом с текстом и стек на меньшем экране

Question

Я работаю над дизайном, который приносит мне некоторую проблему. This is how it should look

Мой код очень похож на этот дизайн, но я не могу его правильно подобрать.

В настоящее время я настроил его с помощью медиа-запроса, чтобы масштабировать изображения вниз и складываться под секцией текста по мере уменьшения размера экрана; однако, в то время как размер окна в процессе получения меньше, он отбрасывает изображения под текстом и оставляет большое пустое пространство.

Кроме того, при полном разрешении есть пробел между изображениями и текстом, но я не могу заставить их сидеть рядом друг с другом. Есть ли что-то, что я мог бы сделать, что облегчит этот проект?

.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

Существует несколько способов подойти к вашей проблеме:

1. Используйте% ширины вашего элемента вместо числа пикселей: Go с 50% -50% для блок изображения и блок текста, используйте display:inline-block, чтобы поместить их рядом друг с другом

2. Используйте CSS-структуру, такую ​​как загрузка ремень или Foudation, лучший пример для использования в вашем случае media

EDIT1 Обновление с codepen: http://codepen.io/thovo/pen/EKwYpq