1. ホーム
  2. html

[解決済み] CSSでfloat topを作るにはどうしたらいいですか?

2022-03-08 17:49:02

質問

CSSではfloatプロパティはleftとrightの値しかサポートしていないのは知っていますが、float topを実装するテクニックはあるのでしょうか?説明させていただきます。以下のようなコードがあります。

<div style="float:left">
<div style="float:left">
<div style="float:left">
....

このコードでは、ページの右端に達するまで、すべてのdivが左にフロートされます。同じことを縦に行いたいのですが、すべてのdivが前のdivの下に配置され、ページの下限に達すると、新しい列が作成されるようにしたいのです。CSSだけを使って(そして多分HTMLコードを編集して)これを行う方法はありますか?

解決方法は?

CSSだけでこれを行うには、CSS 3を使用するしかありませんが、すべてのブラウザ(FF 3.5、Opera、Safari、Chromeなどの最新世代のみ)で動作するわけではありません。

確かにCSS 3では、column-countという素晴らしいプロパティがあり、以下のように使うことができます。

#myContent{
  column-count: 2;
  column-gap: 20px;
  height: 350px;
}

もし#myContentが他のdivを包んでいる場合。

詳しくはこちら : http://www.quirksmode.org/css/multicolumn.html

そこに書かれているように、これを使うには重大な制限があります。上の例では、コンテンツがオーバーフローした場合にのみ、別のカラムに追加されます。 モジラでは、column-widthプロパティを使用することで、必要なだけ多くの列にコンテンツを分割することができます。

そうでない場合は、Javascriptまたはバックエンドで、コンテンツを異なるdiv間に分散させる必要があります。