CSS - 图像级联下来而不是水平对齐

时间：2015-09-30 04:18:57

标签： css image alignment

我试图水平对齐图像但是有一种奇怪的级联效果。我该如何解决这个问题？

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;
}

图像

enter image description here

4 个答案:

答案 0 :(得分：2)

嗨，正如你在这里说的，解决方案可能是你想要的，请查看代码

.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

答案 1 :(得分：0)

你应该将你的书籍html（标题，链接，图像）包装在一个div中。并将float设置为该div包装器。像这样：

<div class="book">
    <div class="book-title"><a href="">Up Country</a></div>
    <div class="book-image"><a href=""><img src="#1" alt="" /></a></div>
</div>
<div class="book">
    <div class="book-title"><a href="">The Quest</a></div>
    <div class="book-image"><a href=""><img src="#2" alt="" /></a></div>
</div>
<div class="book">
    <div class="book-title"><a href="">Radiant Angel</a></div>
    <div class="book-image"><a href=""><img src="#3" alt="" /></a></div>
</div>

书籍div将具有这种风格：

.book {
    float: left;
}

答案 2 :(得分：0)

将以下css代码段添加到您的代码中：

.views-row.views-row-1.views-row-odd.views-row-first {
    display: inline-block;
}

示例代码

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .field-content img {
        float: left;
        padding-right: 10px;
        max-width: 100%;
        height: auto;
    }
    .views-row.views-row-1.views-row-odd.views-row-first {
        display: inline-block;
    }
    </style>
    </head>
    <body>
    
    
    
    <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="https://i.stack.imgur.com/9CFdC.jpg?s=48&g=1" alt="Smiley face" width="42" height="42">
    </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="https://i.stack.imgur.com/9CFdC.jpg?s=48&g=1" alt="Smiley face" width="42" height="42">
    </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="https://i.stack.imgur.com/9CFdC.jpg?s=48&g=1" alt="Smiley face" width="42" height="42">
    </a>
    
              </div>  
          </div>  
      </div>
    </div>    
    
    </body>
    </html>

希望这就是你要找的东西：P

输出截图： 为每个图片标记添加了不同的图片网址。

enter image description here

答案 3 :(得分：0)

您不必放置许多 “类” 和 “divs” 。它会让你更加困惑，如果你不删除它们，你必须在你的类中放置许多属性。我认为以下代码可以解决您的问题。 

.field-content img {
    float: left;
    padding-right: 10px;
    max-width: 100%;
    height: auto;
}
.views-field {
  float:left;
}
<div class="view-content">
  <div class="views-row views-row-1 views-row-odd views-row-first">
      <div class="views-field">        
          <a href="/country">Up Country</a> <br/>
          <a href="/country"><img typeof="foaf:Image" src="xxx.jpg" width="126" height="192" alt="" /></a>
          </div>   
          <div class="views-field">        
            <a href="/country">Up Country</a>  <br/>
              <a href="/country"><img typeof="foaf:Image" src="xxx.jpg" width="126" height="192" alt="" /></a>
                 </div>
          <div class="views-field">        
          <a href="/country">Up Country</a> <br/>
              <a href="/country"><img typeof="foaf:Image" src="xxx.jpg" width="126" height="192" alt="" /></a>
          </div>   
  </div>
</div>

相关问题
最新问题