Question

我有图标，旁边有文字。当我将屏幕缩小到大约431像素时，它会将字词放在徽标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）你可以采用相当“hacky”的方式并使用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处于同一高度。

沿文本的图标

2 个答案: