包裝文字將圖片向上推時

我需要一點幫助，防止下面的文本和圖像在包裝時向上推動圖像。請參閱附件圖片以更好地理解我在說什麼。我們的目標是讓所有圖標水平排列，讓「This Text Is」與「Some Text」和「More Text」保持一致。「更長」應該低於其他所有方面。包裝文字將圖片向上推時

每個圖標和文本被包裹在自己的集裝箱的div像這樣：

<div class = "icon"> 
    <a href = "#"> 
    <img src = "icon.png" /> 
    <h3>Some Text</h3> 
    </a> 
    </div>

這裏是我正在使用創建固定寬度的列的CSS：

.icon { 
    display: inline-block; 
    width: 150px; 
    }

似乎像「display：inline-block」會導致問題，但是如果我將其更改爲「inline」，則圖標div會丟失其固定寬度。使用邊距，填充或定位來移動被推回的圖標不是一個有效的解決方案，因爲這會變得混亂。總共有10個圖標，並且圖標div的寬度根據瀏覽器的寬度而變化（這使得文本在不同的點上取決於瀏覽器的寬度）。我希望有一個簡單的CSS解決方案，如「垂直對齊」（這不起作用）。

任何幫助將不勝感激。

來源

2017-03-15 John O

vertical-align：top; – muratkh

你說垂直對齊沒有工作。這應該對齊有相同的高度頂端圖片：

.icon { 
    vertical-align: top; 
}

來源

2017-03-15 22:26:56

它確實就是這麼簡單。 –

是的，這絕對有用。我認爲我在形象上是這樣，而不是div，這就是爲什麼它以前沒有用。謝謝！ –

你可以將它包裝在柔性容器很大寫了關於Flex here

.icon { 
 
    display: inline-block; 
 
    width: 150px; 
 
    } 
 
    .container{display:flex}

<div class="container"> 
 
<div class = "icon"> 
 
    <a href = "#"> 
 
    <img src = "http://placehold.it/150x150" /> 
 
    <h3>Some Text</h3> 
 
    </a> 
 
    </div> 
 
    <div class = "icon"> 
 
    <a href = "#"> 
 
    <img src = "http://placehold.it/150x150" /> 
 
    <h3>more Text</h3> 
 
    </a> 
 
    </div> 
 
    <div class = "icon"> 
 
    <a href = "#"> 
 
    <img src = "http://placehold.it/150x150" /> 
 
    <h3>Some Longer Text with 2 lines</h3> 
 
    </a> 
 
    </div> 
 
    </div>

來源

2017-03-15 22:18:34 happymacarts

感謝您的回覆。我使用flexbox很多，但在這種情況下垂直對齊要容易得多。 –

可以浮動留在容器的圖標，並導致容器觸發迴流包含的圖標。

.icon { 
    float: left; 
    display: block; 
} 

.container { 
    overflow: hidden; 
}

來源

2017-03-15 23:11:12

包裝文字將圖片向上推時

回答

相關問題