0

同様の質問を調査し、display:table-cell; を使用してみました。インラインブロック; vertical-align:middle いたるところにありますが、これを機能させることはできません。このGenesis テーマ ページのサンプル(ご覧ください) では、「半分」および「最初」の CSS クラスを使用した列の使用方法を示しています。DevTools/Inspector を使用すると、<img src="http://placehold.it/140x240">以下に示すように段落の前に移動して追加できます。創世記のコラムに、これを本来よりも難しくしている何かがあるのか​​もしれません。

その最初の列では、テキストが垂直方向に配置されている間、img をテキストの左側に表示する必要があります。それを実現する組み合わせを見つけることができないようです。注意：画像の高さは知っています-動的ではありません。P の代わりに簡単にスパンを使用できます。

<h3>Two-Columns</h3>
<div class="one-half first">
  <img src="http://placehold.it/140x240">
<p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</p>
</div>
4

1 に答える 1

0

ここで重要なのは、幅の宣言です。pを に設定しても、デフォルトでは幅が 100% になるため、次のように設定displayするinline-block必要があります。

<h3>Two-Columns</h3>
<div class="one-half first">
  <img src="http://placehold.it/140x240" class="OneHalfItem"><p class="OneHalfItem OneHalfText">
      This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
  </p>
</div>

子にクラスが追加され、CSS が適用されていることに注意してください。

.OneHalfItem {
    display:inline-block;
    vertical-align:middle;
    box-sizing:border-box;
}

.OneHalfText {
    width:calc(100% - 140px);
    padding:10px;
}

これで、 を使用して、素敵でダンディに並べられますcalc。いくつかのこと：

  • 画像は固定幅であるため、これは簡単に機能します。サイズが可変の場合は、img幅も宣言する必要があり（パーセンテージなど）、それに基づいてpサイズを計算します
  • デフォルトでは、各要素の右側に 4px の余白が追加されるため、タグの末尾とimgタグの先頭の間の空白を削除しました。タグ間の空白を削除することで、空白の余白がなくなります。pinline-block

これは IE9+ (もちろん実際のブラウザも) でしか機能しないことに注意してください。したがって、IE8 をサポートする必要がある場合は、JS を介して同じ種類の幅計算を行う必要がありますが、簡単に実行できます。

これが動作していることを示すjsFiddleです。

于 2014-10-14T14:18:49.643 に答える