しばらくの間、これらの 4 つの列を自分の Web サイトに配置しました。それらはすべて同じ高さのボックスに配置され、すべて一列に並んでいます。私は現在、サイトをレスポンシブにすることを検討しており、これらの列が小さなデバイスで重なっていることに気付きました。

たとえば、電話デバイスの場合、2 列の 2 行または 1 列の 4 行に切り替えるという点で、これらの列を柔軟にしたいと考えています。

メディアクエリを使用して、.keypoints .column {表示をblockの代わりに作成してみましたinline-block。ただし、これでも列は 1 行に収まっていました。

これは、列を完全に削除し、画面サイズに応じてインライン/ブロック要素スパンに変換する必要があるだけですか、それとも現在の列メソッドを使用してこれを行うことができますか?

http://jsfiddle.net/ycwtb01m/

HTML

CSS

これは、私が取り組んでいる私のウェブサイトページの構造のデモです: http://jsfiddle.net/kz5ch49w/2/

ご覧のとおり、5 つのブロックがあります: ボディ (グレー)、ヘッダー (赤)、フッター (緑)、左ブロック (黄色)、右ブロック (黒)。

私の構造は大丈夫だと思いますか？(CSS は JSFiddle デモで確認できます)

私の問題は、テキストを含む列が非常に薄い理由と、最初の列だけが黒である理由がわからないことです。右側のブロックに「padding:20px」を配置しようとしましたが、機能しませんでした (列の高さが 100% を超えています)。右ブロック div に新しい div を作成する必要がありますか?

手伝っていただけませんか？

これが最後の JSFiddle デモ更新です: http://jsfiddle.net/kz5ch49w/3/

CSS3 列を含むページがあり、疑似要素をインライン要素と同じ Y 位置に配置しようとしていますが、固定 X 位置 (左マージン) に配置しようとしています。これは最初の列ではうまく機能しますが、他の列のこれらの疑似要素の残りは適切に動作しません。

最終的に何が起こるかというと、疑似要素が左マージンに沿って配置されます。これは、要素が単一の列にある場合に配置される場所です。下にスクロールすると、左側に緑色のブロックが表示されます。テキストが 1 つの列にある場合の場所です。

私が望むのは、緑のブロックが存在するテキスト行の左端の列ギャップ領域にあることです。

問題はこのコードにあると思います：

JSFiddle: http://jsfiddle.net/o0xu0e2x/1/

注: 私のアプリケーションは Chromium 41+ のサポートのみを必要とするため、-webkit タグを使用しています。疑似要素 :before/:after の使用は問題ではなく、どちらもこのように動作します。

Pinterest のようなcolumnレイアウトを作成しようとしている CSS のルールとの最初の接触があり、少し奇妙であることがわかりました。何か間違ったことをしているに違いありませんが、結果は期待どおりではありません。

まず、子要素の数に応じて、最後の列がほぼ完全に分割され (はい... 1 行目または 2 行目は問題ないかもしれません)、各要素は前の列の一番下に移動します。

次に、最後の行の下に奇妙で巨大なマージンが作成されます。どういうわけか、最後に別の隠し行があったようです（ありませんが）。

そして最後に、列が最初に埋められたようです。3 番目の要素は 3 番目の行に移動し、8 番目の要素は一番上にあります。

リスト内の要素の数に応じて、列は幅に関して問題なく埋められます (列は幅の 100% を埋めます)。

ああ、ルールを削除するcolumn-gapと、ページの下部のスペースが増えます!

常に幅 100% (で定義されているように N 行column-count) を埋め、セルを最初に左から右に挿入し、次に上から下に挿入する良い方法はありますか? CSS

HTML

エラーの例 (たくさんありますが、これcolumns-count: 4はリストに 6 つの項目が表示されます)

CSS3 複数列を使用しています。内部要素には position:relative があり、position:absolute の矢印を含めることができます。

問題: CSS3 の列が position:absolute の矢印の一部を切り取っています。

例: http://jsfiddle.net/k4ucr72h/

ラッパーで使用column-countし、ラッパー内のコンテナーがborder-radius適用され、コンテナー内のコンテンツがオーバーフローしている場合、最初の列を除くすべての列でコンテンツが完全に消えます。

これが私の例です: https://jsfiddle.net/f4nd7tta/
赤い半円は最初の列にしか見えません。なぜですか?

だから私はこのようなCSSを持っています:

これにより3列が完全に作成されますが、別の行を取得すると、次のように順序が垂直に表示されるようです:

私が望んでいるものの代わりに：

重要！

私が必要とするもう 1 つの重要な属性は、すべての投稿の間に垂直方向のマージンが設定されている必要があるということです。たとえば、上の表を見ると、2が より長い場合1、 の先頭は+ではなく 14から始まります。yheight of 2y

HTML は次のようになります。

これを修正するにはどうすればよいですか?

javascript/jqueryを含むものであっても、どのようなソリューションにも満足しています

これは私が求めている種類のものです

column-count と -webkit-column-count を使用してレイアウトを作成していますが、複数回発生する問題が見つかりました。

この画像からわかるように、Chrome 45 (FF では発生していません) は要素の境界を壊します。これは非常に奇妙で、非常に厄介です。これはブレークが発生するコードの一部です (ただし、ここで発生しない理由はわかりません。違いはフォントと Mayers css reset がないことだけです):

しかし、うまくいきませんでした。何か啓蒙していただけませんか？

複数列のレイアウトに問題があります。メニューを 1 ～ 4 列に揃えたい div 要素のグループとして設計しました (画面の高さとメニュー項目の数によって異なります)。ハードコードすることはできません。

これが私のHTMLです（jsfiddle link）：

私のCSSは次のようになります。

ブラウザーで #sideMenu を調べると、3 列として表示され、幅が必要であるにもかかわらず、最初の列の幅しかないことがわかります。

どうすればこれを修正できますか? (赤いテキストは、右側の最後のボックスの横にある必要があります)

ページコンテンツの横にフロートが必要なので、フロートを削除することは良い解決策ではありません。

ユーザーのクリックでメニューを前後にスライドさせたいので、メニュー div とページ コンテンツをフローティングする必要があります。ユーザーのアクションでメニューの幅を 0% から 100% に変更したいのですが、コンテンツがメニューに干渉するため、それはできません。Chrome と Firefox の最新バージョンでテストしました。