Javascriptを使用せずにこれを行うことは可能ですか？

Question

This demo（これはthis articleに沿っています）は、私が何をする必要があるかを巧みに説明しています。しかし、私は純粋なCSSで可能でなければならない何かのためのjavascriptの使用に感銘を受けていません。

参照している記事（CSSで探しているときに独立して見つけたもの）は、時計のデモと同じ機能を実行しません。the 456 boxes demoは、画面の幅が小さすぎると他のボックスの下をスライドしません。

私は記事コードを試していて、CSSでさまざまなアイデアを試してきましたが、何も正しくレイアウトされていません。また、私は優雅な劣化よりも漸進的な強化を望んでいます。

Answer 1

私はこれが古い質問であることを認識していますが、私はあなたが今使用しているはずの答えを泡立たせたいと思いました：flexbox。質問から元のデモがいなくなって久しいですが、マークアップは、この（courtesy of the Wayback Machine）であった：フレキシボックスを使用して高さを均等にするためには

<div id="one">I am 150px high</div> 
<div id="two">I am 200px high</div> 
<div id="three">I am 120px high</div> 
<div id="four">I am 300px high</div> 

、あなたは彼らの周りにラップされたコンテナを持っている必要があります：

<div class="container container--equal-children"> 
    <!-- those four divs --> 
</div> 

display: flex及び「ストレッチ」にalign-itemsを設定することが所望の効果を与えることを設定：

.container--equal-children { 
    display: flex; 
    align-items: stretch; 
} 

ことだたらスペースの1/4を塗りつぶすことができます。

.container--equal-children #one, 
.container--equal-children #two, 
.container--equal-children #three, 
.container--equal-children #four { 
    flex: 0 1 25%; 
} 

これらはすべて自動的に同じ高さになります。

a CodePen that lets you toggle the flexbox rules on and offをまとめました。トグル機能にはJSが必要です。デザインビヘイビアを示すために、私が追加した（提示されている）スタイルルールもいくつかあります。

Answer 2

残念ながら、純粋なCSSでそれを行う良い方法はありません。私はあなたが単一の親コンテナに基づいてコンテナの動的な高さを必要とすると仮定します。クロスブラウザーの問題は絶対に悪夢となり、効果を達成するために必要な比較的少量のJavaScript（IMO）は、実際に不快で厄介なCSSルールを維持しようとするよりも優れたアプローチです。特定のブラウザなど

これらの「等高さ」のスクリプトが存在する理由は、純粋なCSSの効果がどのくらい面倒であるかによるものです。

私はJavaScriptソリューションに固執します。

Answer 3

これはあなたが単純だと思うだろうが実際は本当に面倒なことです。

「スライディングアンダー」アスペクトは、実際には同じサイズを維持することとは関係ありません。それが浮動小数点の仕組みです。彼らはお互いの下にスライドするから■は年代を妨げる.container固定幅を与えた場合

<div class="container"> 
    <div class="box"></div> 
    <div class="box"></div> 
</div> 

：のようにマークアップと

.box { float: left } 

：彼らはおそらくのようなルールを持っています。

あなたが探しているのは、固定幅のさまざまなボックスの下に背景色を置くことだけであれば、JSなしでこれを達成する簡単な方法があります。

すべてのボックスとタイルの背景を垂直に持つ背景イメージを.containerに与えることができます。あなたの最初の例では、橙色の200ピクセル、青色の200ピクセル、赤色の200ピクセル、および緑色の200ピクセルの高さでわずか数ピクセルに過ぎません。

.containerを "クリア"すると、すべてのボックスが含まれるようになりますので、バックグラウンドボックスはすべて同じ高さになります。

2番目の例では、テキストを垂直方向にセンタリングするなど、もっと複雑なことがあります.JSスクリプトの1つを使ってボックスを均等にするほうが良いでしょう。