設計與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

回答

相關問題