-1

次のテーブル構造を検討してください。

<table style="width:150px;">
 <tr>
  <td>some dynamicly generated content that can wrap several lines</td>
  <td valign="bottom"><img ... /></td>
 </tr>
</table>

CSS を使用してこの効果を得るにはどうすればよいですか (つまり、最初の TD のコンテンツがより多くの行を必要とする場合、テーブルが垂直方向に大きくなり、画像が下部に「ドロップ」します)。

4

4 に答える 4

1

試してみてくださいdisplay:inline-block古いブラウザ用の小さなハックが必要になります（簡単にグーグル対応）が、必要なものを達成するはずです：

http://jsfiddle.net/4vYHa/

.content{
    width:150px;
    display:inline-block;
}
.bottom-image{
     display:inline-block;
}

<div class="wrapper">
    <div class="content">
        <p>Lorem ipsum</p>        
    </div>
    <div class="bottom-image">
        <img src="http://placehold.it/250x150">
    </div>
</div>

編集：画像を一番上に貼り付ける必要がある場合は、次を追加しvertical-align:top;ます：

.bottom-image{
    display:inline-block;
    vertical-align:top;
}
于 2012-04-25T12:44:24.857 に答える
0 
<div id="maintable">

<div class="data1">some dynamicly generated content that can wrap several lines</div>
<div class="data1"><img ... /></div>
</div>

次に、CSS を data1 に適用して、左にフロートし、左にクリアします。これにより、それらが互いに上に保持されます。幅の制限を追加することもできます。

于 2012-04-25T12:24:06.203 に答える
0

フローティング div を使用します。テキスト div に固定幅を指定しないと、必要に応じて伸縮し、画像 div は最終的にテキストの下に「ドロップ」します。

于 2012-04-25T12:24:07.837 に答える
0

このようなことを試してください 

       <div style="width:150px;">
        <div class="dynamic">some dynamicly generated content that can wrap several lines</div>
        <div style="width:20px;"><img ... /></div>
       </div>

編集

                <div style="width:150px;">
               <div style="width:100px; float:left;">some dynamicly generated content that can wrap several lines</div>
               <div style="width:50px; float:right;"><img src="test.png" /></div>
               </div>

Jsfiddle の出力を確認してください: http://jsfiddle.net/srinivasan/AhJzH/1/

于 2012-04-25T12:31:57.780 に答える