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

Question

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

我只使用了两个图像而没有额外的代码，它可以工作，但肯定应该有更好、更可靠的方法，使用 div 容器也允许向图像添加对齐（我需要垂直对齐：中间）。有什么更好的 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/

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

Better way placing images in row

html

css

responsive-design