有頂部的div後的不需要的空間：-7

-1

注意1.不應該有任何紅色，因爲#red是另外兩個#green和#blue的父親。

注3. #green和#blue都有未知高度。

注2 #blue有extera 「頂：-10px」 CSS屬性，所以它有10px的，但父元素（#red）將不會verticaly調整以適應新的崗位

<html> 
<head> 
<style> 
    #red{width: 500px;background: red;height: auto;} 
    #green{width: 500px;background: green;position: relative;float: left;} 
    #blue{width: 500px;background: blue;top:-7px;position: relative;float: left;} 
    .clear{clear: both;} 
</style> 
</head> 
<body> 
    <div id="red"> 
     <div id="green">Green<br>Green<br>Green<br>Green<br>Green</div> 
     <div id="blue">Blue<br>Blue<br>Blue<br>Blue<br>Blue</div> 
     <div class="clear"></div> 
    </div> 
</body> 
</html>

來源

2012-03-26 user1243815

我在代碼中看不到空白區域... http://jsfiddle.net/vGG3a/ – Sparky 2012-03-26 23:35:39

@ Sparky672：他意思是在藍色框的底部多出了7px的紅色，這是通過移動藍色用相對位置框起來7px。 – animuson 2012-03-26 23:36:26

什麼瀏覽器？你在使用有效的「doctype」嗎？您的網頁是否有效？ – Sparky 2012-03-26 23:36:27

我不明白你爲什麼漂浮與父母寬度相同的東西。另外，在這裏使用position: relative並不是必要的。這裏有一個更簡單的方式來實現正是你在說什麼：

<div id="red"> 
    <div id="green"> 
     Green<br>Green<br>Green<br>Green<br>Green 
    </div> 
    <div id="blue"> 
     Blue<br>Blue<br>Blue<br>Blue<br>Blue 
    </div> 
</div>

#red{ 
    width: 500px; 
    background: red; 
    height: auto; 
} 
#green{ 
    background: green; 
} 
#blue{ 
    background: blue; 
    margin-top: -7px; 
    /* Necessary so the text in #green doesn't appear over the blue background */ 
    position: relative; 
    z-index: 100; 
}

View the jsFiddle.

來源

2012-03-26 23:40:17 animuson

-1

添加這對您的DIV #red

頂部：0; 職位：固定;

來源

2012-03-26 23:41:52 dav

有頂部的div後的不需要的空間：-7

回答

相關問題