像報紙和div與媒體css列

我想找到一個解決方案，能夠通過CSS，js或php代碼附加圖像的東西。像報紙和div與媒體css列

我想要我的文章有三列。並在最後2列的頂部爲本文的媒體添加一個額外的div。

鏈接教程或CSS位置技巧是無價的！

在此先感謝...

圖像鏈接：http://my.greview.gr/css_newspaper.png

其確定該解決方案列化的一部分，在這種情況下，我不關心瀏覽器的交叉，但問題這裏是我如何配置媒體div的位置，在最後2列的頂部，並防止主文章的文本重疊！

來源

2011-10-08 kokazani

如果使用的是現代的瀏覽器，你可以使用column位來自CSS3

div#multicolumn1 { 
    -moz-column-count: 3; 
    -moz-column-gap: 20px; 
    -webkit-column-count: 3; 
    -webkit-column-gap: 20px; 
    column-count: 3; 
    column-gap: 20px; 
}

在這裏閱讀更多：http://www.quirksmode.org/css/multicolumn.html

的一種方法，使其與畫面上的兩列工作要做到以下幾點：

設置一個wrapper div，給它一個position:relative
設定multicolumn div，給它一個fixed寬度
添加兩個間隔spans，一個是要在有圖像跨度每一列。將它們設置爲display: block。 NB你需要擺弄他們在內容中的位置才能在頂部創造適當的空間。
使用position:absolute設置圖像的位置。

通常你會使用column-span，並挑選了一些......但是，這不是在我所知道的任何瀏覽器的支持。（他們只支持all或none）。

CSS

div#wrapper{ 
    width:500px; 
    border:1px solid red; 
    padding:1em; 
    position:relative; 
} 

div#multicolumn1 { 
    -moz-column-count: 3; 
    -moz-column-gap: 20px; 
    -moz-column-width:100px; 
    -webkit-column-count: 3; 
    -webkit-column-gap: 20px; 
    -webkit-column-width:100px; 
    column-count: 3; 
    column-gap: 20px; 
    column-width:100px; 
} 

div#img{ 
    height:70px; 
    width:350px; 
    border:1px solid green; 
    position:absolute; 
    right:10px; 
} 

span.bg1{ 
    width:100%; 
    height:100px; 
    display:block; 
}

例子：http://jsfiddle.net/jasongennaro/HgmKg/2/

來源

2011-10-08 02:54:28

它適合這個解決方案的一部分列化，在這種情況下，我不在乎瀏覽器交叉，但這裏的問題是如何配置媒體div的位置，最後2列的頂部，並防止主文章的文字重疊！ – kokazani

請參閱我編輯的解決方案答案@kokazani –

經典的回答你的問題是CSS列。這已經在另一個答案中討論過了。它使您能夠將塊分成多列。

在另一個答案你已經表明，它可能無法爲你工作，因爲你想定位圖形元素，並有文字在他們周圍流動。

這可能與CSS列 - 我不得不承認我沒有嘗試過，但它可以讓文本正常流動圖形，所以我不明白爲什麼它不應該是可能的使用列，因爲它應該像其他任何塊一樣工作，除了文本內部的佈局。

但是，如果這對您不夠好，那麼CSS確實會提供另一種稱爲CSS Regions的解決方案。這是一種機制，允許您指定文本可以從元素流入另一個元素。您可以鏈接您的塊並按照您喜歡的方式放置它們。這給你完全的自由，無論你喜歡什麼，都可以放下你的頁面。

你可以找到更多關於它在這裏：http://msdn.microsoft.com/en-us/ie/hh272902#_CSSConnected

這基本上是一個完全免費的頁面佈局系統，應該是你在尋找什麼。

這是個好消息。

壞消息是CSS區域此時幾乎沒有瀏覽器支持。有關瀏覽器支持的完整信息，請參閱CanIUse。正如你可以從這個鏈接的表格中看到的那樣，它會在幾個瀏覽器中出現，但即使它實現了一次，它仍然有足夠的用戶支持使它值得使用。

這是一個恥辱，因爲它正是你在找什麼。

來源

2011-10-08 18:30:27 Spudley

像報紙和div與媒體css列

回答

相關問題