-1

DIV レイアウトに関していくつか質問があります。

レイアウトの divとフッターの間に大きなギャップがある理由を理解できないようです。フッターのすぐ下に並べるにはどうすればよいですか？

第 2 に、ボックス 2、3、4を作成するために使用された方法はすべて高さ方向に相関しているようです (下部が少し歪んでいるようです)。どうすればこれを達成できますか? 現在、私は高さのパーセンテージで少し推測作業を行っています。

前もって感謝します。

HTML:

<div id="wrapper">
    <div class="logo">logo</div>

    <div id="header">
        <a href="#">link 1</a>
        &nbsp;|&nbsp;
        <a href="#">link 2</a>
        &nbsp;|&nbsp;
        <a href="#">link 3</a>
        &nbsp;|&nbsp;
        <a href="#">link 4</a>
    </div>

    <div style="clear: both;"></div>

    <div class="column" id="first-column">
        <div class="window" id="window-1">1</div>
        <div class="window" id="window-2">2</div>
    </div>

    <div class="column" id="second-column">
        <div class="window" id="window-3">3</div>
    </div>


    <div class="column" id="third-column">
        <div class="window" id="window-4">4</div>
    </div>
    <div style="clear: both;"></div>
    <div class="footer">footer</div>
</div>

</p>

CSS:

body, html{
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
    height: 100%;
}

#wrapper {
    margin: 0 auto;
    max-width: 1212px;
    min-height: 540px;
    min-width: 784px;
    position: relative;
    height: 100%;
}

#header{
    text-align:right;
    padding:5px;
    font-size:10px;
    padding-right: 30px;
}

#first-column{
    width: 20%;
    padding-left: 5px;
    height: 100%;
}

#second-column{
    width: 50%;
    height: 100%;
}

#third-column{
    width: 25%;
}

.window{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border:1px solid #CECECE;
    width:100%;
}

#window-1{
    height:43.5%;
}

#window-2{
    margin-top:10px;
    height:43.5%;
}

#window-3{
    height:87%;
    padding-bottom: 10px;
}

#window-4{
    height:87%;
    padding-bottom: 10px;
}

.column{
    float:left;
    margin: 5px;
    height: 100%;
}

.logo {
    font-family: arial;
    font-size: 12px;
    float: left;
    padding-left: 10px;
}

.footer {
    margin-top: 10px;
    padding-left: 10px;
}
4

1 に答える 1

1

height:100% makes trouble, you should remove it first.

于 2012-07-26T01:35:51.050 に答える