如何獲得此佈局？

綠框有float:left，我可以做到這一點與修復margin-bottom圖像，但文字的金額可以增加或減少。

alt text http://shup.com/Shup/362173/110511132520-My-Desktop.png

2010-06-11 Jitendra Vyas

http://stackoverflow.com/questions/3017172/html-aligning-text/3017250#3017250 – 2010-06-11 12:51:39

#stuff img { 
    float:left; 
    margin-right:25px; 
    } 

    #stuff p { 
    margin-left:150px; 
    } 


    <div id="stuff"> 
    <img src="http://dummyimage.com/125x125/000/fff" /> 
    <p> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    </p> 
    </div>

來源

2010-06-11 12:48:19 luckykind

在圖像上的margin-right沒有做任何事，據我所知。另外，假圖像？！？奇怪的鳥。 – ANeves 2010-06-11 14:21:05

你是對的，可能不需要保證金，可以刪除......在最初的測試中插入......但它不會傷害任何東西......虛擬圖像是佔位符......其他任何東西你想選擇的價值不大？ – luckykind 2010-06-12 13:34:07

我不知道我理解你的要求 - 你問如何保證文本不換綠色盒子的底部？

只需在文本div上設置一個margin-left即可。

編輯：糟糕，主要的錯字。

來源

2010-06-11 12:37:41

的重複不會是利潤率左？ – 2010-06-11 12:49:29

@Jan - 哇，大型，好抓。 – 2010-06-11 13:12:18

我給了你你的觀點回來;） – 2010-06-11 13:34:55

嘗試

<div id="greenbox" style="float: left; width: 100px;"/> 
<div id="content" style="margin-left: 100px;"/>

來源

2010-06-11 12:38:10 levik

最簡單的辦法就是給你的內容float: left;爲好。

如果這是不可能的，那麼給它等於綠框的寬度（加上它的邊距）將是你最好的選擇。

來源

2010-06-11 12:39:42 VoteyDisciple

如何獲得此佈局？

回答

相關問題