0

以下の効果を実現したいと考えています。

         -----
         -img-
         -----
--text-- -----
-------- -----

現在、次のコードがあります。

<div class="header">
        <div class="pictureFrame"> 
            <img class="picture" src="photo.jpg"/>
        </div>
        <div class="position"> 
            text
        </div>
</div>

<div class="separator"></div>

次のスタイルで:

.pictureFrame
{ 
width: 150px;
float: right;
}

.position 
{ 
vertical-align: bottom;
}

.separator
{
clear: both;
}

しかし、垂直方向の配置が機能していないようです。つまり、次のようになります。

--text-- -----
-------- -----
         -----
         -img-
         -----

望ましい効果を達成する方法は？質問が簡単すぎてすみません。

4

3 に答える 3

1

Verical-align プロパティは、インライン要素とテーブルセル要素にのみ適用されます。

これを実現するには、ラッピング div を削除するか、インライン表示として定義してください。ただし、float はインライン要素では機能しないため、画像がテキストに追従するようにするには、html で反転するだけで済みます。

また、偽の表セルを作成して、ブラウザーをだまして垂直方向に整列させることもできます。そのためには、親要素をテーブルとして表示する必要があります。

于 2013-10-30T20:29:47.933 に答える