[解決済み] 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間に分散させる必要があります。
関連
-
[解決済み】エラー。Body " の後の無効な CSS: 期待されるセレクタまたは at-rule は、4 行目の "{" でした。
-
[解決済み】スタイルシートとして解釈されるリソースがMIMEタイプtext/htmlで転送される(ウェブサーバーとは関係ないようです)。
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] ホバー時に背景画像を暗くする
-
[解決済み] HTML CSS インビジブルボタン
-
[解決済み] Add a scrollbar to a <textarea> [duplicate]
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] divの内容を下に揃える方法
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】iframeの背景色を変更する問題
-
[解決済み] HTMLの#記号の文字実体は?
-
[解決済み] ボディの背景色が表示されない?
-
[解決済み] 文字列が部分文字列で終わっているかどうかをXPathでテストする?
-
[解決済み] ionic 4でion-buttonをセンタリングする方法は?[重複しています]
-
[解決済み] :last-child が期待通りに動作しない?
-
[解決済み] 順序なしリストが div 内で左いっぱいに整列されない
-
[解決済み] Font Awesome アイコンをプレースホルダーで使用する
-
[解決済み] Add a scrollbar to a <textarea> [duplicate]
-
[解決済み] Visual Studio Code CSSエラー「空のルールセットを使用しないでください」【終了しました