2011-01-02 14 views
8

私の例ここでは、列を生成しました。画像の右にある欄にテキストが必要です。画像の前には表示されません。これは私の理解では現在のCSSでは実行できません。CSS3列と画像

誰かが私が探しているものを達成するための非邪魔な方法を持っていますか?私は、これはここを見て達成してみたい

、当然の左上にあるタイトルとその他のものなし alt text

。この考え方は、マークアップ内のどこにでも画像を追加し、正しく見えるようにすることです。

私はこの時点でブラウザのサポートを気にしないので、あらゆる解決策が素晴らしいです!事前に

おかげで....

エリック

+0

^^上記の画像(正しいもの)には、20pxのギャップを持つ4列を定義するcss3プロパティがあります。この例では、各列を折り返すdivがあります。イメージ(3列目)を含む列は、最後の2列を折り返して、段落要素に余白部分を追加するようにjavascriptに指示します。 – Erik5388

+0

どうやってそれを浮かべていますか?これは浮き輪が作られたものです! – rxgx

答えて

3

JavaScriptのハッキングを行わずに、これを行うための純粋なCSS方法はないと私は信じています。 Opera(現在パブリックビルドではない)でサポートされているcolumn-spanプロパティがありますが、2つの値しかありません。全員なし。仕様では現在、列の数を指定することはできませんが、これは非常に便利です。それは私が見たいと思うものです。

+0

それは私が探していた答えです。この能力が将来の仕様に現れることは魅力的です。私は彼らが "最後の呼び出し"を数ヶ月後に持っていたと信じているので悪臭を覚える...私はcoloumnスパン仕様が何を言っているのか分からないが、私は "すべて"と "カラムのスパンの現代的なブラウザの実装に何か変更があることを確かめて、私に知らせてください(: – Erik5388

+0

私が理解している限り、カラムの仕様をあまり変更してRec –

1

たぶん列スパンプロパティを使用すると、画像のための追加のコンテナを作成する場合に役立つと真ん中の累積幅に列スパン幅を設定することができます列。

また、中央の列を大きくして別の列が不要になるため、テキストとイメージがうまく整列されますが、この段階ではデザイン上の考慮事項になります。

http://designshack.co.uk/tutorials/introduction-to-css3-part-5-multiple-columns

0

の代わりにあなたが絵の大きさに調整するためにそのサイズを定義することができ、列の数を定義します。 または、各列のサイズを定義してから、画像のCSSセレクタを追加して、列の幅に応じて自動的にサイズを変更することができます。

このようなもの .column { columns:12em; }

.column img { width:10em; }

+0

私もあなたの反応が好きです。しかし、ここでの目標はイメージのサイズを変更するのではなく、イメージの内容をラップすることです。 – Erik5388

0
heightwidth IMG属性ノックアウト

- 彼らは必要ありませんしている - とCSS max-width:100%;

を使用あり(特にIEで)いくつかの下位互換性の問題がありますが、それらはJSで栓をすることができます。この方法は未来です。

参照と便利な関連記事:

http://www.ldexterldesign.co.uk/2010/10/99-css-problems-but-liquid-aint-one/

ベスト、

+0

私はあなたの答え(そしてあなたのブログ - heh)が好きですが、ここでの目標はイメージを縮めないことです。代わりに、コンテンツにイメージをラップするようにしてください。 – Erik5388

0

これは、あなたの質問に正確な答えはありませんが、少なくとも1つの列内の画像の周囲にテキストをラップする可能性があります。 hereから「例X」をチェックしてください。

関連する問題