2012-04-18 87 views
0

我有一個簡單的例子:段落,列表,引用文字與浮動圖像

<html> 
<head> 
    <style type="text/css"> 
     img { 
      float: left; 
      padding-left: 50px; 
     } 
     blockquote { 
      background-color: #FF0; 
     } 
    </style> 
</head> 
<body> 
    <div> 
     <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/HTML.svg/200px-HTML.svg.png" /> 
     <p> 
      paragraph 
     </p> 
     <ul> 
      <li>one</li> 
      <li>two</li> 
      <li>three</li> 
     </ul> 
     <ol> 
      <li>one</li> 
      <li>two</li> 
      <li>three</li> 
     </ol> 
     <blockquote> 
      <p> 
       blockquoted paragraph 
      </p> 
     </blockquote> 
    </div> 
</body> 
</html> 

因此,頁面的外觀:

The page with the image

同一頁面,無需將影像:

The page without the image

我必須從第二實施例獲得的文本對齊的組合和圖像浮動到左側(對準的線被標記爲紅色):

An ideal page

回答

2

您可以使用顯示:內聯像這樣

<div> 
     <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/HTML.svg/200px-HTML.svg.png" /> 

    <div style="display:inline-block;"> 
    <p> 
      paragraph 
     </p> 
     <ul> 
      <li>one</li> 
      <li>two</li> 
      <li>three</li> 
     </ul> 
     <ol> 
      <li>one</li> 
      <li>two</li> 
      <li>three</li> 
     </ol> 
     <blockquote> 
      <p> 
       blockquoted paragraph 
      </p> 


     </blockquote> 
</div>  
</div>​ 
+0

嘿,我想你只是這個http://jsfiddle.net/rohitazad/RntxN/1/ – 2012-04-18 06:46:58

+0

那麼blockquote呢?段落看起來不太好... – 2012-04-18 06:51:43

+0

我認爲你在css中定義ol,ul顯示錶就像這樣http://jsfiddle.net/rohitazad/RntxN/2/ – 2012-04-18 06:57:07

0

float:left添加新DIV的文本。請參閱demo here on JSFiddle

+0

簡單和偉大的答案。 – 2012-04-18 06:34:56

+0

對我來說這不是一個好的解決方案,因爲我想讓文本對齊到圖像下方的** div **的左側。我有這個:http://jsfiddle.net/RntxN/ – 2012-04-18 06:39:24

+0

對不起,我仍然可能沒有正確理解你。請參閱[更新的小提琴](http://jsfiddle.net/ZzWum/2/)並驗證這是否是您要找的。 – 2012-04-18 06:47:40

2

將左浮動的div添加到圖像和其他部分。

<html><head> 
<style type="text/css"> 
    img { 
     float: left; 
     padding-left: 50px; 
    } 
    blockquote { 
     background-color: #FF0; 
    } 
div { 
float: left; 
} 
</style> 
</head> 
<body> 
<div> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/HTML.svg/200px-HTML.svg.png"></div><div> 
    <p> 
     paragraph 
    </p> 
    <ul> 
     <li>one</li> 
     <li>two</li> 
     <li>three</li> 
    </ul> 
    <ol> 
     <li>one</li> 
     <li>two</li> 
     <li>three</li> 
    </ol> 
    <blockquote> 
     <p> 
      blockquoted paragraph 
     </p> 
    </blockquote> 
</div> 

</body></html> 
0

我只想補充margin-right: 50px;到img樣式...