html - 将图像排成一行的更好方法

Question

我想将两张图片排成一行，并在它们之间添加 10px 的间距。由于布局是响应式的，所以行应该在移动屏幕上断开并且图像应该一个在另一个之上。

样本 layout

我只使用了两个图像而没有额外的代码，它可以工作，但肯定应该有更好、更可靠的方法，使用 div 容器也允许向图像添加对齐(我需要 vertical-align:middle)。什么是更好的 CSS 来实现这一点，特别是对于这种布局？

Answer 1

也许这可以帮到你。 将图像放在宽度为 50% 的 div 中。要添加填充，您可以使用 box-sizing: 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;
   } 
}

你可以在这里看到一个 fiddle http://jsfiddle.net/f4bt5Lq0/1/