問題タブ [css-multicolumn-layout]

私はコンテンツ（フォーマットされた単一のテキストと多くのテキスト）がCSS3（からと）によっていくつかの列（30-40）に分割されているウェブページを持っていdivますcolumn-heightcolumn-width

特定の列のコンテンツ（その列内のテキスト）を取得する方法はありますか？どんな言語、フレームワーク、アルゴリズムでも大歓迎です:)

私は現在、CSS3 マルチカラムを使用してコンテンツを分割するプロトタイプに取り組んでおり、うまく機能しているようです。私の問題は、列の一部であるブロック内に高さのセクションが拡張されていることです。Firefox では、CSS3 の複数列内の要素の高さが変更されると、要素が消えて Firefox がクラッシュします。

CSS3 の複数列は、内部のさまざまな高さのコンテンツを考慮に入れるべきではありませんか、それともそのようなことのために作成されていませんか? Columnizer のようなプラグインを使用しなければならないのは本当に嫌です。

レイアウトは次のとおりです。

問題は、リンクをクリックして高さが変わるとすぐに、レイアウトと配置が失われ (高さと幅が 0 に変わる)、Firefox がクラッシュすることです。これは、Firebug を使用して手動で高さを変更した場合にも当てはまります。

新しい複数列のレイアウトを使用して複数列のレイアウトを設定しようとしています。しかし、作成された列に柔軟な幅を許可する方法はありますか？
私がオンラインで見たすべての戦略は、コンテンツが列をオーバーフローした場合でも、常に固定幅のレイアウトになります。

JSFiddleの例

コンテンツが 2 つの列に分割されているが、列の中央に引用ボックスがある Web サイトの新聞レイアウトを作成する方法を探しています。

CSS3を使用して2つの列を作成する方法を知っています

しかし、中央に引用ボックスを作成するにはどうすればよいですか?また、中央のボックスの周りに列内のコンテンツを「ラップ」する方法はありますか?

私が言いたいことのイラストを添付しました。
この図で、2 つの列のテキストが中央のボックスに巻き付けられていることを想像してください。

Windows 8 用の JavaScript ベースの Metro アプリを開発しています。複数列の記事を持つコンテナーの背景を設定しようとしています。基本的に、左側にリストビュー、右側に複数列の記事があります (分割ビューに似ています)。

記事のフローを水平 (CSS プロパティの column-width を使用して複数列) に設定しようとしていますが、記事の背景を設定すると、ビューポートの端までしか設定されません。

分割アプリ テンプレートを使用して新しいプロジェクトを作成し、 split.htmlで次の HTML を現在の HTML ( body タグ内) に置き換えます。

split.css ファイルの内容を次の内容に置き換えます。

アプリを実行し、ハブの任意のタイルをクリックして、split.html を表示します。右にスクロールして、背景色の記事が適切でないことに注意してください。

<ul>5番目の要素ごとに別の列を自動的に作成する1つのプレーンがある柔軟なコードを記述しようとしています。これを実現するチュートリアルを見つけましたが、アイテムを水平方向に配置しますが、垂直方向の順序が必要です。垂直方向の順序を出力する他のいくつかのチュートリアルを見たことがありますが、それぞれにclass="first"andを付けますが、これは私が望むものではありません。私は既存の HTML コードを処理しようとしています。class="second"li

私が欲しいもの:

私が持っているもの：

CSS:

HTML:

私のCSS列は、ChromeではFirefoxやIE9での表示とは異なって表示されます。これはFirefoxの正しい表示です：

Chromeで正しく表示されない方法は次のとおりです。

liChromeでの種類の改善である、に変更しようとしましたdisplay: inline-blockが、狭いリスト項目が同じ「セル」に表示されます。

問題を実証するためにJSFiddleを作成しました。

だから私はcss3仕様について知り、すぐにそれを使って動的に生成されたテーブルを使用するフォーラムリストcolumnsを「近代化」できることに気づきました。

テーブルを生成するコードは、次のデータベース行のデータをテーブルの新しい行に配置するか、新しい列に配置するかを決定するため、非常に複雑です。css3列の方法を使用すると、コードにデータをページに読み取らせ、css3をそのままにして、どの列に何を入れるかを決定できると思います。

しかし、私は少し問題に遭遇しました。これを使用する場合、コンテンツは指定された数の列に分割されません。

参照用のコードは次のとおりです。

テスト用にこのJSFiddleを設定しました：http：//jsfiddle.net/LYoung/JLVEs/1/

明らかに私は何か間違ったことをしている。誰かが私がそれが何であるか、そしてなぜそれが間違っているのかを特定するのを手伝ってもらえますか？

特定のデバイス用に 2 列の epub ブックを作成しています。私の問題は、css を使用して を指定するcolumns ( -webkit-column-count: 2; -webkit-column-rule: 0px;)と、最終結果は次のようになることです。

ページ 1 に表示されます (パート 1 | パート 3)。

ページ 2 に、詩の (パート 2 | パート 4) が表示されます。

より自然なブック フローで行うことを希望します。

(パート 1 | パート 2) の 1 ページに続き、

(パート 3 | パート 4) 2 ページ。

これをアーカイブする方法はありますか？

いくつかの追加メモ:

1. 列の高さを制限しようとしましたが、3番目の列を追加するだけで、これは私が望むものではありません.
2. 本の内容は動的に生成されるため、休憩の場所を事前に指定することはできません。

私はウェブサイトを構築しており、主に Chrome でテストしており、Firefox でも動作するかどうかを断続的に確認しています。

Chrome と Safari はどちらも WebKit で実行されるため、Web サイトは同じようにレンダリングされると考えました。しかし、そうではありません。

私は Safari でサイトをチェックしていましたが、メニュー バーが順序付けされていないリストをcolumn-count(両方-moz-と-webkit-同じ値で) 使用していることに気付き、列の塗りつぶしに違いがあることに気付きました。

Chrome は列を均等に埋めているように見えますが、Safari は列を 1 つずつ埋めているだけです。以下の画像はこれを示しています。

Chrome のレンダリング:

Safari のレンダリング:

列をレンダリングする Chrome の方法が非常に気に入っているので、htmlレイアウトをまったく変更せずに、Safari にこの方法でサイトを強制的にレンダリングさせる方法があるかどうか疑問に思っていました。

注: Firefox は Chrome と同じようにレンダリングされ、修正する必要はありません。私はIE用に開発していないので、それがどのようにレンダリングされるかわかりません。