Question

编辑：通过空格我的意思是内部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之后他们都离开了父母（或者这就是它似乎发生的事情），从而留下了一个巨大的空白区域。

谢谢。

Answer 1

将overflow: hidden;添加到#menu ul - 您尚未清除已浮动的列表项

完成后，如果您不想要空间，可以将<div id="menu">的高度调整为0.

jsbin

Answer 2

你的意思是青色的白色空间？如果您这样做，请将overflow:hidden添加到#container：

#container
{
    overflow:hidden;
    position:relative;
    top:-19px;
    height:500px;
    width:950px;
    background-color:cyan;
    border-top:7px double white;
}

Answer 3

从pre代码中删除所有空格，并消除所有不必要的相对定位。

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

jsFiddle

Answer 4

如果我明白你的意思，只需删除边框，看看你得到了什么

试一试

div, ul, li{
    border:0 !important;
}

漂浮在左边留下一个白色的空间

4 个答案:

jsFiddle