CSS - 图像向下层叠且不水平对齐

Question

我试图水平对齐图像，但有一种奇怪的向下层叠效果。我该如何解决这个问题？

HTML (Drupal)

<div class="view-content">
  <div class="views-row views-row-1 views-row-odd views-row-first">
      <div class="views-field views-field-title">        
        <span class="field-content"><a href="/country">Up Country</a></span>  
      </div>  
      <div class="views-field views-field-field-book-image">
          <div class="field-content">
              <a href="/country"><img typeof="foaf:Image" src="xxx.jpg" width="126" height="192" alt="" /></a>
          </div>  
      </div>  
  </div>
</div>    

CSS

.field-content img {
    float: left;
    padding-right: 10px;
    max-width: 100%;
    height: auto;
}

图片

Answer 1

您好，正如您所说，这可能是您想要的解决方案，请查看代码

.view-content{
    display:block;
}
.views-row{
    float:left;
    margin:5px;
    padding:5px;
    border:1px solid grey;
}
.views-field.views-field-title {
    text-align: center;
}
.field-content img {
    width: 150px;
    height: 200px;
}

<div class="view-content">
  <div class="views-row views-row-1 views-row-odd views-row-first">
      <div class="views-field views-field-title">        
        <span class="field-content"><a href="/country">Up Country</a></span>  
      </div>  
      <div class="views-field views-field-field-book-image">
          <div class="field-content">
              <a href="/country">
<img src="http://www.iconpng.com/png/stickers/books.png" alt="Smiley face">
</a>

          </div>  
      </div>  
  </div>
<div class="views-row views-row-1 views-row-odd views-row-first">
      <div class="views-field views-field-title">        
        <span class="field-content"><a href="/country">Up Country</a></span>  
      </div>  
      <div class="views-field views-field-field-book-image">
          <div class="field-content">
              <a href="/country">
<img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/512/Books-2-icon.png" alt="Smiley face">
</a>

          </div>  
      </div>  
  </div>
<div class="views-row views-row-1 views-row-odd views-row-first">
      <div class="views-field views-field-title">        
        <span class="field-content"><a href="/country">Up Country</a></span>  
      </div>  
      <div class="views-field views-field-field-book-image">
          <div class="field-content">
              <a href="/country">
<img src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/simple-black-square-icons-culture/126872-simple-black-square-icon-culture-books3-stacked.png" alt="Smiley face">
</a>

          </div>  
      </div>  
  </div>
</div> 

这是这段代码的演示工作代码

DEMO