2

このようなページレイアウトを作成しようとしています。

ここに画像の説明を入力

これは私の HMTL 構造です -

<div id="content-three-cols">
    <div class="leftcol">

    </div>

    <div class="cols-content">
        <div class="banner">

        </div>

        <div class="two-cols">
            <div class="rightcol">

            </div>

            <div class="middlecol">

            </div>                  
        </div>              
    </div>      
</div>

これはこれまでの私のCSSコードです-

.leftcol {
   display: inline;
   float: left;
   min-height: 500px;
   width: 180px;
   background: #34ab2b;
}

.banner {
   background: #ffe400;
   border-bottom: 1px solid #DDDDDD;
   float: left;
   width: 750px;
   height: 150px;
}

.middlecol {
  width: 600px;
  min-height: 600px; 
  background: #2b73ab;
}

.rightcol {
  width: 150px;
  min-height: 500px; 
  background: #b2540f;
  float: right;
}

このスタイルを追加すると、期待どおりの出力が得られませんでした。代わりに、私の欲求は、このコードが私のために混乱したレイアウトを作成する結果になります。どうすればこれを理解できるか教えてもらえますか。

これはJsFiddleです

ありがとうございました。

4

3 に答える 3

3

非常に単純です。これは私が作成した簡単なデモです。すべてをすぐに説明します。

デモ

HTML:

<div class="left"></div>
<div class="head"></div>
<div class="center"></div>
<div class="right"></div>

CSS:

body, html{
    height:100%;
}

.left, .right, .head, .center{
    float:left; // Float all the containers to the left so have a `inline` effect
}

.left{
    height:100%;
    width:25%; // Full width minus right and center width 
    background:orange;
}

.head{
    background:red;
    height:10%; // Height of header
    width:75%; // Full width minus left sidebar
}

.center{
    width:50%; // Full width minus both sidebar's width
    background:skyblue;
    height: 90%; // Full height minus header height
}

.right{
    width:25%; // Full width minus center and left width
    background:green;
    height:90%; // Full height minus header height
}

また、多くの要素が空中に浮かんでいるため、 Clearfixを手元に用意する必要がある場合があることに注意してください。

ハッピーコーディング:)

クリアフィックス...

このフィドルを見てください。すべて正常に動作しています

http://jsfiddle.net/mqzJN/

このようにリンクにフロートを追加すると

http://jsfiddle.net/mqzJN/1

<div>リンクが空中に浮かんでいるため、高さがなくなったため、背景がなくなっていることがわかります。

したがって、このフィドルのように、これを修正するために clearfix を使用します

http://jsfiddle.net/mqzJN/2/

したがってfloat、最後のフィドルの例のように、clearfix クラスをその要素のコンテナーに追加したくない要素がある場合があります。

于 2013-07-27T16:08:29.397 に答える
1

ここに画像の説明を入力ここ

HTML:

<body>
        <div class="left">

        </div>

        <div class="right">
            <div class="upper"></div>


            <div class="lower">
                <div class="innerLeft"></div>
                <div class="innerRight"></div>
            </div>
        </div>
</body>

CSS:

body {
    width: 100%;
}
.left {
    width: 25%;
    height:  450px;
    float: left;
    background-color: #f00;
}
.right {
    width: 75%;
    height:  450px;
    float: right;
    background-color: #4cff00;
}
.upper {
    width: 100%;
    float: left;
    height: 100px;
    background-color: blue;
}
.lower {
    width: 100%;
    height: 100px;
    background-color: grey;
}
.innerLeft {
   width: 65%;
   float: left;
   height: 350px;
   background-color: fff;
}
.innerRight {
   width: 35%;
   float: right;
   height: 350px;
   background-color: #000;
}
于 2013-07-27T16:12:03.873 に答える
1

ほら！( http://jsfiddle.net/aV2Dn/ )

<div id="wrapper">
    <div id="left_column"></div>
    <div id="top_bar"></div>
    <div id="middle"></div>
    <div id="right_column"></div>
</div>

#wrapper{
    width:500px
    height:500px;
    margin: auto;
}
#left_column{
    width: 100px;
    height:500px;
    background: #34ab2b;
    position:absolute;
    left:0px;
    top: 0px;
}

#top_bar{
    position: absolute;
    left: 100px;
    top: 0px;
    width: 400px;
    height:100px;
    background-color: #ffe400;
}

#middle{
    position: absolute;
    left: 100px;
    top: 100px;
    width: 300px;
    height:400px;
    background: #2b73ab;
}

#right_column{
    position: absolute;
    left: 400px;
    top: 100px;
    width: 100px;
    height:400px;
    background: #b2540f;
}
于 2013-07-27T16:13:48.437 に答える