沿着文字的圖標

Question

我得到了圖標，並且在它旁邊有文字。當我將屏幕縮小到431px左右時，它會將該字放在徽標下方see the upper section called flexibel如何對齊文字保持在我的徽標旁邊？

看看網站本身和代碼bastiaanbos.ch。

Answer 1

你有很多方法來實現這一點。

1）您可以使用像Bootstrap這樣的佈局框架並利用網格功能。例如：

<div class="row"> 
<div class="col-md-2">The icon</div> 
<div class="col-md-10">The text</div> 
</div> 

2）你可以去一個比較 「哈克」 的方式，並使用html tables。

3）最壞情況：將height應用到第一個div。

Answer 2

你可以把圖像和文字在一個div，然後更改與圖像的div基於文本的div

var heights = $("section").map(function() 
    { 
     return $(this).height(); 
    }).get(), 

    maxHeight = Math.max.apply(null, heights); 

    function check() { 
    elements = document.getElementsByClassName("col-lg-4"); 
    for (var i = 0; i < elements.length; i++) { 
     elements[i].style.minHeight=maxHeight + 'px'; 
    } 
} 

的高度有了這個方法，你可以對多個列中的大小圖像和圖像的一側與最高的div的高度相同。