Question

考虑以下表格结构：

<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中的内容占用更多行时，表格垂直增长，图像“下降”到底部）

Answer 1

尝试display:inline-block您需要针对旧版浏览器进行小规模破解（轻松实现Google浏览），但它应该可以满足您的需求：

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;
}

Answer 2

<div id="maintable">

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

然后将CSS应用于您的data1以向左浮动并向左清除，这将使它们保持在彼此之上。您也可以继续添加宽度限制。

Answer 3

使用浮动div。给文本div没有固定的宽度，然后它将根据需要拉伸，图像div最终将“下降”到文本下方。

Answer 4

尝试这样的事情

       <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/

使用CSS进行设计

4 个答案: