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

您应该将图书 html（标题、link、图片）打包成一个 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;
}

Answer 2

将以下 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

输出截图：为每个图片标签添加了不同的图片 url。

Answer 3

你不必放很多"classes"和"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>

Answer 4

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

.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

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

CSS - Images cascading down and not aligning horizontally

image

alignment

示例代码