テキストに沿ったアイコン

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）最悪のシナリオ：最初にdivにheightを適用してください。

あなたは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要素のサイズを変更することができ

Answer 2

画像の高さが最も高いdivと同じ高さになります。