嵌套兩個div在「標題」div打破設計

我有一個標題，應始終顯示在頁面的頂部約20像素從頂部。現在它被定義爲兩個div，並按照它應有的方式工作。嵌套兩個div在「標題」div打破設計

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
body { 
    height: 100%; 
    margin-left: 20px; 
    margin-top:0px; 
    margin-bottom: 0px; 

} 
.subheader-left { 
    position: absolute; 
    top: 20px; 
    font-family: serif; 
    font-size: 20px; 
    text-align: left; 
} 
.subheader-right{ 
position: absolute; 
font-family: sans-serif; 
font-size: 12px; 
top: 20px; 
right: 20px;} 
</style> 

<title>XYZ</title> 

</head> 
<body> 
    <div class="subheader-left">XYZ<br /></div> 
    <div class="subheader-right">LOREM</div> 
</body> 
</html>

當我嘗試用「頭」 DIV標籤封裝兩個DIV標籤和分配給它兩個封裝的div有共同的元素（頂：20像素），它打破了設計。

我總是認爲嵌套的div繼承自他們的父div，並且想明白爲什麼在這種情況下這不起作用。我認爲這是因爲「位置：絕對」標籤，但「位置：相對」打破了設計。

感謝

http://jsbin.com/emulel/1/edit

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
body { 
    height: 100%; 
    margin-left: 20px; 
    margin-top:0px; 
    margin-bottom: 0px; 

} 
.header {top:20px;} 
.subheader-left { 
    position: relative; 
    font-family: serif; 
    font-size: 20px; 
    text-align: left; 
} 
.subheader-right{ 
position: relative; 
font-family: sans-serif; 
font-size: 12px; 
right: 20px;} 
</style> 

<title>XYZ</title> 

</head> 
<body> 
<div class="header"> 
    <div class="subheader-left">XYZ<br /></div> 
    <div class="subheader-right">LOREM</div> 
</div> 
</body> 
</html>

來源

2012-08-13 Roland

請在jsFiddle.net上發帖。使我們所有人都更輕鬆，更輕鬆 – 2012-08-13 21:35:39

also ..'position：absolute'使元素具有相對於根的距離屬性元素含義'top：20px'從屏幕頂部始終爲20px，無論它嵌套的位置 – 2012-08-13 21:37:39

@MattHintzke實際上'top：20px'在這裏什麼都不會做，'couse'。header'默認位置爲'static' – 2012-08-13 21:41:24

你混了幾個東西：

標題沒有指定位置，所以頂：20px的;沒用。如果你定位元素，絕對將始終定位在相對定位的元素上。

你應該去浮動：

保持你的HTML喜歡它，並添加這個CSS：

.header { 
    overflow: hidden;/* to contain the floated elements */ 
} 
.subheader-left { 
    float: left; 
}.subheader-right { 
    float: left; 
}

來源

2012-08-13 21:42:54 Mark

像這樣的東西應該看你在正確的道路上：

http://fiddle.jshell.net/3gZNM/3/

無需絕對定位。

來源

2012-08-13 21:42:49

你需要

.subheader-left { 
float:left; 
} 
.subheader-right{ 
float:right; 
}

這是因爲在第一個例子中，該申報單有position:absolute，所以他們的寬度是最小的。

但第二個他們有position:relative和它的display是block，所以他們擴大，他們的寬度是最大的。然後第二個div進入第二行。

但是，如果你添加浮動，他們的寬度將是最小的，他們將留在同一行。此外，第二個div將向右移動。

但隨後記得換頭的overflow到hidden，auto或scroll，或添加<div style="clear:both"></div>在頭的末端。

來源

2012-08-13 21:43:16 Oriol

嵌套兩個div在「標題」div打破設計

回答

相關問題