html - 使用 CSS 进行设计

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/