シンプルなCSSレイアウト - どのようにこのレイアウトを実現し、簡単に拡大縮小できますか？

Question

ねえ、私はちょうどこの単純なレイアウトを達成できますか？私はその答えがCSSのレイアウトと浮動小数点の基本を理解する助けになると期待しています。

<div id="verticalElement1"> 
     <div id="horizontalElement1"> 
      some content 
     </div> 
     <div id="horizontalElement2"> 
      some content 
     </div> 
    <div> 
    <div id="verticalElement2"> 
     <div id="verticalElement3"> 
      some content 
     </div> 
     <div id="verticalElement4"> 
      some content 
     </div> 
    <div> 

オクラホマので、「ID」sが示唆として、私はお互いのトップに1つずつ座って垂直方向の要素をしたいと思います。

先頭の要素の内側に、私は2つの水平要素が座るようにしたいです次のです。

私はこれを達成したいと考えていますはすべての要素に "インライン"を適用せずにです。

また、私は、絶対的な位置付けを使用したいとは限りません。

私は非常にクリーンでスケーラブルなCSSを使って、スタイルの値を変更することなく要素を追加したり削除したりすることができます。

<div id="verticalElement1" class="containsHorizontalElements"> 
     <div id="horizontalElement1" class="isHorizontal"> 
      some content 
     </div> 
     <div id="horizontalElement2" class="isHorizontal"> 
      some content 
     </div> 
    <div> 
    <div id="verticalElement2"> 
     <div id="verticalElement3"> 
      some content 
     </div> 
     <div id="verticalElement4"> 
      some content 
     </div> 
    <div> 

私は浮動小数点数を適用しようとしましたが、すべてが狂ってしまいました....助けてください！

歓声

Answer 1

あなたの垂直コンテナは単にブロックとして表示する必要があります。これはデフォルトではdivのタグです。それらの内部の内容は、左に浮かぶか、または左と右に浮かべることができます。実際に両方が同じ行に終わるように、水平要素に幅を設定することもできます。

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

<div id="container1" class="container"> 
    <div class="inner-element"></div> 
    <div class="inner-element"></div> 
</div> 
<div id="container2" class="container"> 
    <div class="inner-element"></div> 
    <div class="inner-element"></div> 
</div> 

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

.inner-element { 
    float: left; 
    width: 100px; 
} 

また、あなたは山車を含むすべてのあなたのコンテナをクリアするために覚えておく必要があります。

.container {min-height: 10px;} 

.container:after { 
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden; 
} 

もちろん、divの名前を「コンテンツ」のようにもっと意味的に正しいものにすることもできます「ラッパー」などのように、実際に目的を説明するのではなく、「左カラム」の代わりに「コンテンツ」という名前をつけてください。

Answer 2

水平要素を達成するために、あなたが浮くことになるでしょう：左;それらは互いに対して積み重ねられます。

vertical要素は、display：blockまたはwidth：100％のいずれかを宣言するだけで、互いの上に座ることができます。それは彼らが互いの上に積み重ねるように、水平の空間全体を占めるようにします。