CSS - 图像向下级联且未水平对齐答案

【问题标题】：CSS - Images cascading down and not aligning horizontallyCSS - 图像向下级联且未水平对齐
【发布时间】：2015-09-30 13:32:24
【问题描述】：

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

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

图片

【问题讨论】：

请包含您的 HTML。
把你的html文件也加进去，方便整理？
@Soorapadman 在问题中添加
@purpledot 它的接线方式是什么？
@HimeshAadeshara 没有关注，你的意思是它的连接方式是什么？

标签： css image alignment

【解决方案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

【讨论】：

这行得通，谢谢 Himesh，需要调整一些东西，但它是水平对齐的。
@purpledot 欢迎..!!现在你想要什么。？

【解决方案2】：

您应该将您的 Book 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;
}

【讨论】：

【解决方案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>

【讨论】：

这个（html）是由 Drupal 预先生成的，这不是我手工制作的。
这很接近图像已对齐，但标题与图像的左侧对齐，而不是像屏幕截图中那样位于图像上方。

【解决方案4】：

将以下css代码sn-p添加到您的代码中：

.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。

【讨论】：

不，这会导致第一个和第二个图像相互对齐，然后第三个图像在第二个图像的右侧。它看起来像一个“L”型图案。
@purpledot ：我附上了输出的截图，对我来说似乎很好..