Question

我想在一行中放置两个图像，并在它们之间添加10px的间距。由于布局是响应式的，因此行应该在移动屏幕上中断，图像应该一个在另一个之上。

我只使用两个图像而没有额外的代码，它可以工作，但肯定应该有更好，更可靠的方式，使用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>

通过将max-width设置为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/

将图像排成行的更好方法

1 个答案: