设计与CSS

-1

考虑下面的表结构：设计与CSS

<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的内容需要更多的线路，表垂直生长和图像“滴“到底部）

来源

2012-04-25 epeleg

这将是很好，如果向下选民会留下评论解释... – epeleg 2012-04-25 21:02:50

尝试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-25 12:44:24

我喜欢这个解决方案，并随之而去。谢谢。 – epeleg 2012-04-25 21:03:42

<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-25 12:24:06 Purplemonkey

但我不希望他们一个在另一个之下，图像应该将其底部与文本的底部对齐，但保持在其右侧。 – epeleg 2012-04-25 13:30:56

使用浮动div。给文本div没有固定的宽度，它会根据需要伸展，图像div最终会在文本下面“落下”。

来源

2012-04-25 12:24:07 Paul

我正在使用浮动，但我无法弄清楚你建议的结构。 – epeleg 2012-04-25 13:29:49

查看http://jsfiddle.net/S3B3a/的示例没有浮动但定位，因为我认为这适合您的需要更好。 – Paul 2012-04-25 13:51:45

尝试这样的事情

 <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-25 12:31:57 srini

他们结束了一个在另一个之下... http://jsfiddle.net/epeleg/AhJzH/ – epeleg 2012-04-25 13:34:00

请检查我的编辑功能 – srini 2012-04-25 14:45:19

对不起，图像仍然与文本“顶部对齐”... 感谢尽管你的努力。 – epeleg 2012-04-25 21:05:01

回答

相关问题