我怎樣才能把它變成一個div

我怎麼能在一個div中做到這一點？目前它有兩個div，但我需要使它成爲一個div，如左側顯示的圖像，文本顯示在右側。我怎樣才能把它變成一個div

<div style='float: left; margin-left: 6px; margin-bottom: 6px; height: 191px;'> 
    <img src='http://www.cnn.com/features/150px.jpg' width='100' height='100' border='0' alt='Lipsum' /> 
    <br /> 
    <img src='http://www.cnn.com/features/b150px.jpg' width='100' height='100' border='0' alt='Lipsum' /> 
    <br /> 
    <br /> 
    <br /> 
</div> 
<div id='lipsum'> 
    <p>first paragraph</p> 
    <p>second paragraph</p> 
</div>

來源

2011-05-11 Nick Kahn

我只看到一個DIV有... – rusty 2011-05-11 13:12:04

你能擴大在你的問題你要求使一個div，但只有一個div標籤用於此htm l – 2011-05-11 13:12:59

你不應該像其他人的網站那樣從CNN那裏榨取圖像。（我假設你不是CNN網站的開發者）。你不應該拿走他們的資產，但是如果你真的想要它，至少要將圖像保存到你自己的服務器並從那裏加載。 – Jeff 2011-05-11 13:27:41

您可以使用clear: left：

參見：http://jsfiddle.net/thirtydot/FN4h4/

CSS：

img { 
    float: left; 
    clear: left; 
    margin: 0 6px 
}

HTML：

<div id='lipsum'> 

    <img src='http://www.cnn.com/features/150px.jpg' width='100' height='100' border='0' alt='Lipsum' /> 
    <img src='http://www.cnn.com/features/b150px.jpg' width='100' height='100' border='0' alt='Lipsum' /> 

    <p>Lorem ipsum..</p> 
    <p>Lorem ipsum..</p> 
</div>

來源

2011-05-11 14:03:39 thirtydot

只是爲了讓你知道你的圖片不會出現。另一個問題。這將在IE7中工作 - 我已經看到它在使用'clear：'作爲'float'的相同css項目時有問題嗎？（這是一個好奇的問題，而不是一個洞挑） – 2011-05-11 14:15:48

我怎麼能在圖像之間有一個空間，我只需要圖像開始段落 – 2011-05-11 14:18:20

@我的頭傷害：我剛剛使用了問題的圖像。就我所知，這應該在IE7中工作得很好。我不熟悉任何與您的描述類似的IE7錯誤。 – thirtydot 2011-05-11 14:24:19

不需要另一個div給你的形象align屬性，像

<img src='http://www.cnn.com/features/150px.jpg' width='100' 
     height='100' border='0' alt='Lipsum' align="left"/>

來源

2011-05-11 13:34:27

如果你問爲什麼的img標籤和文本節點在同一div（這是什麼聽起來像我），因爲你有所有的子節點屬於一個單獨的節點（id =「div_left」）。 Html，Xml和XHtml都基於分層節點結構。任何你想分成div的東西，例如處理單獨的浮動規則，都應該被分成不同的div。你仍然可以將它們子節點放到一個父div中，但是如果你想定義單獨的樣式，你應該明確地將它們放入div或span標籤中。

例如，當我有多個子節點不同的造型，我總是使用模板：

<div id="parentId"> 
    <div id="child1" /> 
    <div id="child2" /> 
</div>

來源

2011-05-11 13:40:15 BMB

我必須補充一點，就分離內容和風格而言，我是一個純粹主義者。作爲一名Java開發人員，我認爲堅持這一基本原則會在很多方面爲未來開發創造靈活性，其中最重要的是允許將數據提取移植到全新的邏輯中。 – BMB 2011-05-11 13:44:26

要避免使用多個div爲什麼呢？我會做這樣的事情：

HTML

<div class="article"> 
    <img src="image1.jpg"/> 
    <p>Paragraph 1</p> 
</div> 
<div class="article"> 
    <img src="image2.jpg"/> 
    <p>Paragraph 2</p> 
</div>

CSS

.article 
{ 
    clear: both; 
    width: 400px; 
} 
.article img 
{ 
    float: left; 
} 
.article p 
{ 
    float: right; 
}

Working Demo

來源

2011-05-11 14:05:14 Town

我如何在圖像之間有空間，我只需要圖像在段落開始的位置 – 2011-05-11 14:18:06

我怎樣才能把它變成一個div

回答

相關問題