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

你的意思是青色的白色空间？如果你这样做，那么添加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 回答
0

从您的标签中删除所有空格pre并摆脱所有不必要的相对定位。

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

jsFiddle

于 2013-03-14T13:38:34.757 回答
0

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

试试看

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