沿着文字的图标

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的高度相同。