Лучший способ размещения изображений в строке

Question

Я хочу разместить два изображения в одной строке и добавить между ними 10px. Поскольку макет реагирует, строка должна разбиваться на мобильный экран, а изображения должны идти один над другим.

Образец layout

Я использую только два изображения без дополнительного кода, это работает, но, безусловно, должно быть лучше, более надежный способ, с помощью Div контейнеров, а также позволяет добавлять совместив к изображениям (нужно вертикальное выравнивание : средний). Что лучше CSS для достижения этого, особенно для этого макета?

Answer 1

Возможно, это может вам помочь. Поместите изображения внутри div с шириной 50%. Чтобы добавить прописку, вы можете использовать размер окна: border-box;

<div class="row"> 
     <div class="left "> 
      <img src="http://www.codewithsonia.com/stuff/img/vader.jpg" /> 
     </div> 
     <div class="right ">  
      <img src="http://www.codewithsonia.com/stuff/img/vader.jpg" /> 
     </div> 
</div> 

Сделайте изображения отзывчивым, установив максимальную ширину до 100%

img { 
    max-width: 100%;  
} 

.left{ 
    width:50%; 
    float: left; 
    position: relative; 
    border-right:5px solid green; 
    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box;  

} 

.right{ 
    width:50%; 
    padding-right: 0px; 
    float: right; 
    border-left:5px solid red; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
      box-sizing: border-box; 

} 

.row:after {  
     clear: both; 
    } 

@media screen and (max-width: 300px) { 
    .right { 
    width:100%; 
    border-left:0; 
    clear:right; 
    }  
    .left{ 
    width:100%; 
    border-right:0; 
    clear:right; 
    } 
} 

Вы можете увидеть скрипку здесь http://jsfiddle.net/f4bt5Lq0/1/