1

編集：空白とは、内側のdivが一番上に積み重ならないことを意味します（それが理にかなっている場合） http://jsfiddle.net/UdbKq/

次のhtmlセットアップがあります

<body>
<div id=all>
<pre>
<div id=header><b>
 __   __     ______     ______     __     __     __  __     ______     __         ______     ______     ______   ______  
/\ "-.\ \   /\  __ \   /\  == \   /\ \  _ \ \   /\ \_\ \   /\  __ \   /\ \       /\  ___\   /\  __ \   /\  ___\ /\__  _\ 
\ \ \-.  \  \ \  __ \  \ \  __<   \ \ \/ ".\ \  \ \  __ \  \ \  __ \  \ \ \____  \ \___  \  \ \ \/\ \  \ \  __\ \/_/\ \/ 
 \ \_\\"\_\  \ \_\ \_\  \ \_\ \_\  \ \__/".~\_\  \ \_\ \_\  \ \_\ \_\  \ \_____\  \/\_____\  \ \_____\  \ \_\      \ \_\ 
  \/_/ \/_/   \/_/\/_/   \/_/ /_/   \/_/   \/_/   \/_/\/_/   \/_/\/_/   \/_____/   \/_____/   \/_____/   \/_/       \/_/ 
  </b>
</div>                                                                                                             
</pre>
<div id=content>
    <div id=menu>
        <ul>
            <li><a href=#>Home</a></li>
            <li><a href=#>Lorem Ipsum</a></li>
            <li><a href=#>Github</a></li>
            <li><a href=#>About us</a></li>
            <li><a href=#>Contact</a></li>
        </ul>
    </div>
    <div id=container>
        <div id=leftcontent>
        </div>
        <div id=middlecontent>
        </div>
        <div id=rightcontent>
        </div>
    </div>
</div>  
</div>

そして、CSS

    body
{
    background-color:black;
    font-family:'Press Start 2P', cursive;'
}
#all
{
    margin:auto;
    color:#fff;
    width:950px;
    height:100%;
    border:7px double #fff;
}
#header
{
    position:relative;
    top:-27.8px;
    font-size:12px;
    border-bottom:7px double #fff;
}
#menu ul
{
    position:relative;
    left:-40px;
    top:-75px;
    width:950px;
    font-size:16px;
    font-family:'Press Start 2P', cursive;
}
#menu ul li
{
    background-color:pink;
    text-align:center;
    width:184.4px;
    float:left;
    padding:20px 0px 20px 0px;
    list-style:none;
    display:inline;
    border-right:7px double #fff;
}
#menu ul li:last-child
{
    border:none;
}
#menu ul li:hover a
{
    color:#000;
    background-color:#fff;
}
#menu a
{
    color:#fff;
    text-decoration:none;
}
#container
{
    position:relative;
    top:-19px;
    height:500px;
    width:950px;
    background-color:cyan;
    border-top:7px double white;
}
#leftcontent
{
    float:left;
    padding:0;
    margin:0;
    background-color:red;
    border-right:7px double white;
    width:184.4px;
    height:500px;
}
#middlecontent
{
    float:left;
    padding:0;
    margin:0;
    background-color:blue;
    border-right:7px double white;
    width:567.2px;
    height:500px;
}
#rightcontent
{
    float:left;
    padding:0;
    margin:0;
    background-color:green;
    width:184.4px;
    height:500px;
}

今私の問題は、コンテンツ div をフローティングした後、それらがすべて親を離れて (またはそれが起こっているように見えます)、上部に巨大な空白が残ることです。

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

4

4 に答える 4

3

追加- フローティング リスト項目をクリアしていませoverflow: hidden;ん#menu ul

それが完了したら<div id="menu">、スペースが必要ない場合は高さを 0 に調整できます。

jsbin

于 2013-03-14T13:35:18.960 に答える
0

タグからすべての空白を削除しpre、不要な相対位置をすべて取り除きます。

<div id=header>
    <pre>[ascii chars]</pre>
</div>

jsフィドル

于 2013-03-14T13:38:34.757 に答える
0

私があなたの意味を理解したら、境界線を取り除いて何が得られるか見てください

試してみる

div, ul, li{
    border:0 !important;
}
于 2013-03-14T15:14:28.390 に答える
0

シアンの空白のことですか？その場合は、次のように追加overflow:hiddenし#containerます。

#container
{
    overflow:hidden;
    position:relative;
    top:-19px;
    height:500px;
    width:950px;
    background-color:cyan;
    border-top:7px double white;
}
于 2013-03-14T13:35:33.383 に答える