問題タブ [css-multicolumn-layout]

CSS マルチカラムを使用する場合、n 番目のカラムをターゲットにすることは可能ですか?

例: 2 列のレイアウトがあり、2 番目の列のみをターゲットにしたい:

HTML

CSS

http://jsfiddle.net/XH72Y/3/

そうでない場合は、各列を個別にスタイルする機能を使用して、2 つの列 (2 つの個別の div ではなく、CSS 領域ではなく) 内でテキストを動的にフロートする方法が他にありませんか?

複数列の CSS を発見しましたが、印刷時にこれらのスタイルが無視されることがわかりました。

これは既知のバグですか? それとも私は何か間違ったことをしましたか？

ここにフィドルがあります

Ubuntu Chrome で確認します。

UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (Gecko のような KHTML) Chrome/36.0.1985.125 Safari/537.36

動作する 2 列の CSS のみのグリッドがありますが、両方の列の下に余分なスペースが生じます。

.

各セルからインラインブロックを削除すると、余分なスペースはそれほど悪くありませんが、グリッドの折り返しを防ぐために必要です。問題は垂直方向の位置合わせにあると推測しましたが、これを追加しても違いはないようです。この余分なスペースを防ぐ方法はありますか?

構造：

ページに新聞のようなコラムを作成しようとしています。しかし、私のページにはテーブルが含まれており、IE、Chrome、Safari、および Opera では、テーブルが 2 つの異なる列に分割されています。これは私が望んでいる動作ではありません。テーブルがある場合は、完全に 1 つの列に収めたいと思います。ここにいくつかのコードがあります：

問題を確認してそれをいじる簡単な方法は、Chrome を使用してhttp://www.w3schools.com/css/tryit.asp?filename=trycss3_column-gapに移動し、私の例のコードに貼り付けることです。Firefox を試してみると、表が完全に左側の列に収まっていることがわかります。

li.key が新しい列にラップしないように強制しようとしています。各列の先頭から新しい li.key を開始したい。これがJSフィドルです。

これはJSを使用せずに可能ですか？

CSS:

望ましい結果: (各列の上部にある文字を参照してください。)

非常に一般的な <header><article><footer> レイアウトを想像してみてください。ヘッダーとフッターは固定の高さで、記事は必要に応じて縦に表示されます (ページは縦方向にスクロールして表示されます)。これは、ほとんどの Web ページと同じです。

私が取得しようとしているのは、そのようなレイアウトですが、その横にあるため、記事は必要なだけ広くなり、ページは水平にスクロールします:

私の最初の試みはフレックスボックスを使用しました：

これがjsFiddleでの私の最初の試みです。

関連する CSS:

しかし、少し近いこの fiddleのように、他のことを試みるにつれて、私はそれから離れています。この試みの問題点は、テキストが右に流れているにもかかわらず、記事の幅がビューポートの幅の 100% に制限されていることです! columns(私の記事では、私のレイアウトにとって非常に重要なCSS を使用しています。)

私の要件は次のとおりです。

• ヘッダー、記事、フッターの高さを 100% にする (完了)
• ヘッダーは幅 400 ピクセル (完了) で、コンテンツの左側 (完了)
• フッターの幅を 450px にして (完了) 、記事の右側に配置 (方法は?)
• フッターが重ならないように記事を必要なだけ広くする (方法は?)

だから、私は太字の目標について助けが必要です. 記事がフッターの右側に重ならないようにするにはどうすればよいですか? このページをレイアウトして、コンテンツの幅に合わせて記事の幅を広げる方法はありますか?

• Chrome、Firefox、および Safari で動作するはずです (IE と Opera はプラスですが、必須ではありません)。
• JavaScript がないことが望ましい (または、仕様から削除される可能性が高い CSS 機能)
• シンプルでクリーンな CSS が理想的