2

左側に画像（サムネイル）があり、画像の横にいくつかのdiv（垂直方向：コンテナの中央）が含まれるコンテナを描画しようとしています。それらには、ボタンとドロップダウンリストが含まれ、プレーンテキスト以外の何かが含まれる可能性があります。

使用する必要があることなどはわかっていますfloat:leftが、運が悪いので、見栄えがよくありません。ですから、私が達成したことの例すら提供しません。代わりに、私は私のビジョンを提供します：

問題のビジョン

テーブルソリューションは必要ありません。divのみが必要です。もちろん、可能であれば。

誰かがこれを手伝ってくれませんか？

4

2 に答える 2

8

を使用しdisplay: inline-block;ます。これは基本的に、インライン動作とブロック動作のハイブリッドです。これがサンプルのHTMLです。

<div class = "container">
    <img src = "pic.png" class = "inbl"/>
    <div class = "inbl"></div>
    <div class = "inbl"></div>
</div>

CSS：

.inbl {
    display: inline-block;
    vertical-align: top;
}
.container {
    white-space: nowrap;
}

そして少しのデモ：少しのリンク。

于 2012-09-13T13:56:04.193 に答える
4

divタグを使用してテーブルビューを作成することもできます。このように

<div style="display:table">
    <div style="display:table-cell">
       <img src="src" style="width:150px;height:100px;/>
    </div>
    <div style="display:table-cell;vertical-align:middle;" align="center">
       <div> your container1 </div>
    </div>
    <div style="display:table-cell;vertical-align:middle" align="center">
        <div> your container2 </div>
    </div>
</div>
于 2012-09-13T13:56:11.137 に答える