圍繞一個img（不是文本）包圍單行div

我試圖讓一大堆div來環繞圖像，但是失敗了。圍繞一個img（不是文本）包圍單行div

由於粘貼HTML在StackOverFlow中似乎不起作用，因此我目前嘗試模擬Outlook 2010聯繫人條目。

資料來源：http://www.perfmon.com/download/contactdivtest.htm （編輯：或退房@斯托伊奇的酷在線編輯）

<html> 
<head> 
<title> 
</title> 
<style type="text/css"> 
.contactLarge{ 
    width: 250px; 
    height: 220px; 
} 
img.picture { 
    margin-left: 0px; 
    margin-bottom: 0px; 
    float: left; 
} 
.contactLarge item{ 
} 
</style> 
</head> 
<body> 
<div class="contactLarge"> 
<div style="background-color:#C5CED8;clear:both">title </div> 
<img class="picture" width="100" height="200" src="ContactBigLeftBorder.png" alt=""> 
First, Last <br> 
First, Last <br> 
First, Last <br> 
First, Last <br> 
<div style="width:100%;font-weight:bold; float: left;">LastName, Firstname</div> 
<div style="font-weight:bold;clear:both;" >CompanyName</div> 
<div >Title</div> 
<div >Work#</div> 
<div >Mobile#</div> 
<div >Home</div> 
<div >email1</div> 
<div >email2</div> 
<div >email3</div> 
<div >Street</div> 
<div style="background-color:#F1F5F9; float:left;" >City,</div> 
<div style="background-color:#F1F5F9; float:left;" >State</div> 
<div style="background-color:#F1F5F9;" >Zip</div> 
<div style="background-color:#F1F5F9; clear:left; float:left;" >httppage</div> 
<div style="background-color:#F1F5F9; ">im</div> 
</div> 
</body> 
</html>

誰能告訴我什麼，我需要做的，使所有的移動起來，在圖像周圍包裹的div？我真希望我沒有簡單的東西...

這裏的目標佈局，我嘗試：

alt text http://perfmon.com/download/contactdivtest.bmp

來源

2010-08-05 LamonteCristo

查看http://stackoverflow.com/editing-help以獲取有關將代碼置於問題中的幫助。 – 2010-08-05 12:13:26

你可以發佈你想要完成的圖像嗎？我不能從HTML中知道，也不要使用Outlook 2010。 – DHuntrods 2010-08-05 12:16:01

嘗試使用span而不是div來爲您的特定解決方案 – KoolKabin 2010-08-05 12:16:15

福爾您的特定解決方案跨度可以更好地爲您：

檢查版本與跨距：

<html> 
<head> 
<title> 
</title> 
<style type="text/css"> 
.contactLarge{ 
    width: 250px; 
    height: 220px; 
} 
.contactLarge span{ 
    font-weight: bold; 
} 
img.picture { 
    margin-left: 0px; 
    margin-bottom: 0px; 
    float: left; 
} 
.contactLarge item{ 
} 
</style> 
</head> 
<body> 
<div class="contactLarge"> 
<div style="background-color:#C5CED8;clear:both">title </div> 
<img class="picture" width="100" height="200" src="http://www.perfmon.com/download/ContactBigLeftBorder.png" alt=""> 
First, Last <br> 
First, Last <br> 
First, Last <br> 
First, Last <br> 
<span>LastName, Firstname</span> <br /> 
<span>CompanyName</span> <br /> 
<span >Title</span> <br> 
<span >Work#</span> <br> 
<span >Mobile#</span> <br> 
<span >Home</span> <br> 
<span >email1</span> <br> 
<span >email2</span> <br> 
<span >email3</span> <br> 
<span >Street</span> <br> 
<span style="background-color:#F1F5F9; float:left;" >City,</span> <br> 
<span style="background-color:#F1F5F9; float:left;" >State</span> <br> 
<span style="background-color:#F1F5F9;" >Zip</span> <br> 
<span style="background-color:#F1F5F9;" >httppage</span> <br> 
<span style="background-color:#F1F5F9; ">im</span> <br> 
</div> 
</body> 
</html>

來源

2010-08-05 12:19:28 KoolKabin

感謝您解決我的跨度問題。經驗教訓:) – LamonteCristo 2010-08-05 13:57:39

甲<div>是塊級元素 - 這意味着它自動CL耳朵換新線，寬度爲100％。沒有看到你的HTML或CSS很難看到你要去哪裏錯了，但試圖利用float：

div { 
    float: right; 
    width: 50%; 
}

編輯：
現在你已經張貼你想我可以說，什麼樣的圖片你可能會想是這樣的：
HTML：

<div id="container"> 
    <img src="foo.jpg" /> 
    <div id="content"> 
     <p>Blah blah</p> 
     <p>More blah blah</p> 
    </div> 
</div>

CSS：

#content { 
    width: 60%; 
    float: right; 
}

只要確保內部div的img +寬度的寬度小於包含div的寬度即可。

來源

2010-08-05 12:19:28

感謝您對css n00b的解釋！ – LamonteCristo 2010-08-05 13:47:51

關於編輯：P是否比跨度更好？ – LamonteCristo 2010-08-05 14:05:48

語義上，p是一段文本，而span在語義上沒有任何意義。完全取決於你選擇的內容，牢記p是塊元素，跨度是內聯的。 – 2010-08-05 14:08:44

Div是塊級元素。它將佔用整個寬度並在前後生成中斷。

圖片默認情況下是內聯元素。你想把它包裝在另一個（而不是浮動）。或者使用span來代替（span是div的內聯兄弟），或者在div上將css display屬性設置爲inline。

來源

2010-08-05 12:40:06

謝謝，我怎麼知道給定的標籤是內聯還是阻塞？ – LamonteCristo 2010-08-05 13:43:58

http://htmlhelp.com/reference/html40/block.html是塊級元素的列表。其餘標籤是內聯的。 – 2010-08-05 13:55:50

這種類型的東西非常有用的技巧是「display：inline-block」。

它顯示的東西內聯（所以包裝將起作用），但給你幾乎塊級元素的完全可配置性。

來源

2010-08-05 12:42:42

我看到div vs span可能是一個宗教辯論......所以我沒有任何網站和每個方面+1。謝謝你的提示。我喜歡設計時的選擇:) – LamonteCristo 2010-08-05 14:02:09

呃，這不是關於宗教，只是你認爲合乎邏輯的東西。對於我來說跨度從來沒有太大的意義，通常在內部文本（標籤，時間，強等）的語義上更好的選項 – 2010-08-05 15:18:33

有用的知識。而且，我只能看到自己在數據綁定的情況下使用跨度......但這讓我想......也許我應該爲此打開一個新問題。 – LamonteCristo 2010-08-05 21:49:39

如果您在文本週圍創建「文本框」div並將其浮起，則應該很好。請參閱：

<html> 
<head> 
<title> 
</title> 
<style type="text/css"> 
.contactLarge{ 
    width: 250px; 
    height: 220px; 
} 
img.picture { 
    margin-left: 0px; 
    margin-bottom: 0px; 
    float: left; 
} 
.textbox { 
    float: left; 
} 
.contactLarge item{ 
} 
</style> 
</head> 
<body> 
<div class="contactLarge"> 
<div style="background-color:#C5CED8;clear:both">title </div> 
<img class="picture" width="100" height="200" src="ContactBigLeftBorder.png" alt=""> 

<div class="textbox"> 
First, Last <br> 
First, Last <br> 
First, Last <br> 

First, Last <br> 
<div style="width:100%;font-weight:bold; float: left;">LastName, Firstname</div> 
<div style="font-weight:bold;clear:both;" >CompanyName</div> 
<div >Title</div> 
<div >Work#</div> 
<div >Mobile#</div> 
<div >Home</div> 
<div >email1</div> 
<div >email2</div> 

<div >email3</div> 
<div >Street</div> 
<div style="background-color:#F1F5F9; float:left;" >City,</div> 
<div style="background-color:#F1F5F9; float:left;" >State</div> 
<div style="background-color:#F1F5F9;" >Zip</div> 
<div style="background-color:#F1F5F9; clear:left; float:left;" >httppage</div> 
<div style="background-color:#F1F5F9; ">im</div> 
</div> 

</div> 
</body> 
</html>

來源

2010-08-05 16:23:32 tomvon

圍繞一個img（不是文本）包圍單行div

回答

相關問題