新聞のようなCSSの列とメディアを使ったdiv

Question

私は、css、js、またはphp経由で添付画像のようなものをコード化できる解決策を見つけようとしています。

私の記事には3つの列が必要です。そして最後の2列の上に、記事のメディアの1つの余分なdivがあります。

このチュートリアルやCSSの位置付けに関するリンクは貴重です。事前に

おかげで...

画像リンク：columnizationの一部この解決のためにhttp://my.greview.gr/css_newspaper.png

---

その[OK]を、この場合には、私は、ブラウザのクロスのために気にしないが、問題ここでは、2つの最後の列の上にメディアdivの位置を設定して、主要記事のテキストが重ならないようにする方法を示します。

Answer 1

あなたは近代的なブラウザを使用している場合は、より多くのここに読む

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

CSS3からcolumnビットを使用することができます。それは二つの列の上に絵を動作させるためにhttp://www.quirksmode.org/css/multicolumn.html

---

一つの方法次を行うことです：

1. セットwrapper div、それをposition:relative

2. を与えるには、fixed幅

3. は2つのスペーサーspans、あなたは画像をまたがっ持たせたい各列に1つずつ追加し、それを与え、あなたのmulticolumn divを設定します。それらをdisplay: blockに設定します。 NBあなたはコンテンツの中で自分の位置をうまく使って、上部に適切なスペースを作る必要があります。

4. 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/

Answer 2

あなたの質問への古典的な答えはCSSの列です。これは既に別の答えで議論されています。これは、ブロックを列に分割する機能を提供します。

他の回答では、図形要素を配置し、その周りにテキストが流れているように、あなたのために機能しない可能性があります。

これは、CSSの列で可能であるかもしれない - 私はそれを試していない告白しなければならないが、通常、グラフィックス周りを流れるようにテキストを取得することが可能であるので、それを可能にすべきではない理由を私は見ていませんそれはその中のテキストのレイアウトから離れた他のブロックのように動作するはずだからです。

これはあなたのために十分ではない場合は、その後、CSSはCSS領域と呼ばれる別のソリューションを提供しません。これは、テキストがエレメント間で流れることを指定できるメカニズムです。あなたのブロックを連鎖させ、好きなように配置することができます。これにより、好きなようにページをレイアウトすることができます。

あなたはここでそれについての詳細を調べることができます：http://msdn.microsoft.com/en-us/ie/hh272902#_CSSConnected

それは基本的には完全に無料ページレイアウトシステムだし、あなたが探している正確に何である必要があります。

良いニュースです。

悪いニュースはCSS領域はこの時点でほぼゼロブラウザのサポートを持っていることです。ブラウザサポートの詳細については、CanIUseを参照してください。そのリンクの表からわかるように、それはいくつかのブラウザに入っていますが、実装されていても、それを使用する価値のある十分なユーザサポートが得られない場合があります。

それはあなたが探しているまさにですので恥です。