多列div與圖像

我想用一個圖像的第一列，使用CSS3屬性列計數的一列的寬度的2列div的樣式。對於可以處理CSS3的瀏覽器，它應該是這樣的：多列div與圖像

img col 
col col 
col col 
col col

然而，對於沒有閱讀能力，而不是停留在左上角與文本在下一行開始圖像的CSS，瀏覽器，我想把它浮動，就像這樣：

img texttextte 
xttexttexttext 
texttetexttext

目前，我有這個有問題的圖像，其中規定了我想要的東西對於不能支持CSS3的瀏覽器：

display: inline; 
float: left; 
-webkit-column-span: in-column; 
-moz-column-span: in-column;

但是對於那些能夠支持它的瀏覽器，它看起來像這樣，與圖像佔用了所有列本身：

img col col 
    col col 
    col col 
    col col

...這不是我想要的。如何讓圖像浮動，有無列？

編輯：

下面是HTML：

<div id="content"> 
    <h2>Title here</h2> 
    <img src="/static/images/img01.jpg" width="200" height="152" /> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Nam porttitor urna sit amet est pulvinar congue. Integer 
    lacinia dictum enim, non molestie turpis volutpat et. Praesent 
    pretium accumsan sapien, porttitor rhoncus augue porta ac. 
    Quisque fermentum enim quis magna condimentum a lobortis urna 
    accumsan. Integer viverra tristique turpis, sed fermentum 
    lorem hendrerit vitae.</p> 
</div>

這是迄今未-相當工作的CSS：

#content { 
    width: 600px; 
    -moz-column-count: 2; 
    -webkit-column-count: 2; 
    -moz-column-gap: 18px; 
    -webkit-column-gap: 18px; 
} 
#content img { 
    display: inline; 
    float: left; 
    -webkit-column-span: in-column; 
    -moz-column-span: in-column; 
}

我覺得自己像一個漂浮的，內聯圖像在列中不應該如此。

來源

2011-08-30 katherine

你能發佈你的HTML嗎？ – jim31415

您的'列跨度'聲明[顯示爲無效]（http://www.w3.org/TR/css3-multicol/#column-span）或[非標準]（http：// kmsm。 CA/2010/AN-幾乎完全引導至CSS3的多列布局/）。 –

@ jim31415發表。 – katherine

你可以試試這個...

<img src="/static/images/img01.jpg" width="200" height="152" style="float: left;"/>

...作爲一個內嵌式的（更好的是在外部樣式表類），或者使用好老align屬性...

<img align="left" src="/static/images/img01.jpg" width="200" height="152" />

...我希望這有助於。

來源

2011-08-31 14:49:34 user466764

您可以將圖像放在p標籤中。您預留的列和圖像的大小，以便您很好。我已經完成了這個沒有問題，你唯一不能做的就是讓圖像跨越多列。

來源

2011-09-15 03:31:31 Tyus

多列div與圖像

回答

相關問題