css - HTMLで特定のレイアウトを作成するには?

Question

HTMLで特定のレイアウトを作成したいのですが、いくつか問題があります。

画像は言葉よりも理解しやすいので、ここに私が持っているものがあります：

これは問題ありませんが、div1 が高くなるとすぐに、次のようになります。

そして、私の目標はそのようなものを持つことです:

今のところ、div を使用していますが、これはおそらく良い考えではありません。どんな助けでも大歓迎です。事前にどうもありがとうございました。

Answer 1

div はそれを行うための優れた方法です。右の 2 つの div の周りに div を含むフローティング レイアウトを使用できます。ここに、私が何を意味するかを示すコードをいくつか示します。

HTML

<div id="wrapper" class="clearfix">
    <div id="sidebar"></div>
    <div id="main_content">
        <div id="top_right"></div>
        <div id="bottom_right"></div>
    </div>
</div>

CSS

#wrapper { background: #44BBF0; }
#sidebar { float: left; width: 100px; height: 500px; background: #485F40; }
#main_content { float: right; }
#top_right { width: 200px; height: 200px; background: #FF553F; }
#botom_right { width: 200px; height: 300px; background: #B0DE91; }

.clearfix:before,
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1; /* IE < 8 */
}

これがどのように見えるかを示すJSフィドルリンクです：http://jsfiddle.net/ddxYB/

ラッパー div を必ずクリアしてください。フローティング要素のみが含まれているため、そうしないと高さがありません。私が使用した例では、時間を節約するために高さを設定しましたが、自動高さを使用して div がコンテンツの高さを引き継ぐ場合も同様です。

これは、JSFiddle コードのスクリーンショットです。

Answer 2

まず、コンテナの概念を理解する必要があります。

列として 2 つのコンテナーを作成します。

• div1 を含む左の列

• div2 と div3 を含む右側の列

したがって、HTML の場合、次のような構造を作成します。

<div class="col1">
    <div>div 1</div>
</div>

<div class="col2">
    <div>div 2</div>
    <div>div 3</div>
</div>

CSS を使用して列を配置します。

div.col1 {
    float: left;
    width: 200px;
}

div.col2 {
    float: left;
    width: 400px;
}

Answer 3

各 div の CSS 位置を絶対に設定し、マージンを使用して配置します。

#divName {
position: absolute;
margin: 10px 10px 10px 10px; //position them wherever you want.
}