1. 首頁
  2. 問答
  3. 正文標籤不對齊到頂部位置

正文標籤不對齊到頂部位置

2014-09-24 81 views
2

我有一個非常簡單的html網頁頁眉，內容和頁腳部分。由於某種原因，頁眉部分沒有定位到窗口頂部，我做錯了什麼，但我無法弄清楚在哪裏。我可能會進一步弄亂試圖修復它的代碼。正文標籤不對齊到頂部位置

<div class="wrapper"> 
     <div class="header-wrapper"> 
      <div class="header"> 
       <div class="archive-year"> ARCHIVE</div> 
       <div class="title">TITLE</div> 
       <div class="date">DATE</div> 
      </div> 
     </div> 
     <div class="content"> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
     </div> 
     <div class="footer"><a href="http://www.website.net">FOOTER</a></div> 
    </div>

CSS

html {margin:0px; padding:0px; height: 100%;} 
body, form {margin:0px; padding:0px;} 
.wrapper{width:100%; margin:0px auto; height:100%; font-family:Arial, Helvetica, sans-serif;} 
.header-wrapper{width:100%; background-color:#000; min-height:300px; margin:30px auto;} 
.header{background-color:#000; background-color:red; width:800px; margin:10px auto;} 
.archive-year{position:relative; width:100%; margin:30px 10px; font-size:20px color:#ccc;} 
.title{position:relative; width:100%; margin:10px; font-size:20px color:#fff;} 
.date{position:relative; width:100%; margin:10px 10px; font-size:20px color:#1aa0e0;} 
.content{position:relative; width:100%; margin:30px 10px; font-size:12px color:#000;} 
.footer{position:relative; width:100%; margin:30px 10px; font-size:12px color:#000;}

小提琴例如：http://jsfiddle.net/wfrquhpf/1/

來源

2014-09-24 Learning

+0

它的所有利潤率。 [固定版本]（http://jsfiddle.net/wfrquhpf/11/）'margin：10px 30px;' - '10px'是頂部/底部，'30px'是左/右。 – Ruddy 2014-09-24 07:38:44

回答

3

是，

.header-包裝{寬度：100％;背景色：＃000;最小高度：300像素; 保證金：30PX汽車;}

嘗試用這些，

.wrapper{margin:0px; padding:0px;width:100%;;font-family:Arial, Helvetica, sans-serif;} 
.header-wrapper{width:100%; background-color:#000; min-height:300px; margin:0px auto;} 
.header{background-color:#000; background-color:red; width:800px; margin:0px auto;}

注：考慮到使用的填充，而不是邊距的間距。

來源

2014-09-24 07:37:12

2

是因爲邊距已設置爲：

.archive-year { 
    margin: 30px 10px; 
} 

.header { 
    margin: 10px auto; 
} 

.header-wrapper { 
    margin: 30px auto; 
}

請檢查更新的小提琴：http://jsfiddle.net/wfrquhpf/7/

你可以使用填充代替：http://jsfiddle.net/wfrquhpf/15/

希望這有助於

來源

2014-09-24 07:38:16 emmanuel

+0

我需要保持頭部包裝器'margin：30px auto。 ' – Learning 2014-09-24 07:40:56

+0

請檢查我的編輯。 – emmanuel 2014-09-24 07:45:14

4

您可以刪除多餘的保證金：

html { 
 
    margin:0px; 
 
    padding:0px; 
 
    height: 100%; 
 
} 
 
body, form { 
 
    margin:0px; 
 
    padding:0px; 
 
} 
 
.wrapper { 
 
    width:100%; 
 
    margin:0px auto; 
 
    height:100%; 
 
    font-family:Arial, Helvetica, sans-serif; 
 
} 
 
.header-wrapper { 
 
    width:100%; 
 
    background-color:#000; 
 
    min-height:300px; 
 
} 
 
.header { 
 
    background-color:#000; 
 
    background-color:red; 
 
    width:800px; 
 
    margin:0 auto; 
 
} 
 
.archive-year { 
 
    position:relative; 
 
    width:100%; 
 
    font-size:20px color:#ccc; 
 
} 
 
.title { 
 
    position:relative; 
 
    width:100%; 
 
    margin:10px; 
 
    font-size:20px color:#fff; 
 
} 
 
.date { 
 
    position:relative; 
 
    width:100%; 
 
    margin:10px 10px; 
 
    font-size:20px color:#1aa0e0; 
 
} 
 
.content { 
 
    position:relative; 
 
    width:100%; 
 
    margin:30px 10px; 
 
    font-size:12px color:#000; 
 
} 
 
.footer { 
 
    position:relative; 
 
    width:100%; 
 
    margin:30px 10px; 
 
    font-size:12px color:#000; 
 
}
<div class="wrapper"> 
 
    <div class="header-wrapper"> 
 
     <div class="header"> 
 
      <div class="archive-year">ARCHIVE</div> 
 
      <div class="title">TITLE</div> 
 
      <div class="date">DATE</div> 
 
     </div> 
 
    </div> 
 
    <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</div> 
 
    <div class="footer"><a href="http://www.website.net">FOOTER</a> 
 
    </div> 
 
</div>

來源

2014-09-24 07:38:36

0

DEMO 它是很基本的錯誤使用保證金這樣的嘗試使用填充，而不是利潤率，因爲它會轉移佈局以最高金額爲餘額頂部

*{margin:0 auto; padding:0px;} 
html {margin:0px; padding:0px; height: 100%;} 
body, form {margin:0px; padding:0px;} 
.wrapper{width:100%; margin:0px auto; height:100%; font-family:Arial, Helvetica, sans-serif;} 
.header-wrapper{width:100%; background-color:#000; min-height:300px;} 
.header{background-color:#000; background-color:red; width:800px;} 
.archive-year{position:relative; width:100%; margin:0px 10px; font-size:20px color:#ccc;} 
.title{position:relative; width:100%; margin:10px; font-size:20px color:#fff;} 
.date{position:relative; width:100%; margin:10px 10px; font-size:20px color:#1aa0e0;} 
.content{position:relative; width:100%; margin:30px 10px; font-size:12px color:#000;} 
.footer{position:relative; width:100%; margin:30px 10px; font-size:12px color:#000;}

來源

2014-09-24 07:40:04 himanshu

0

在您的代碼archive-year和header-wrapper均已應用保證金最高。如果你將從那裏移除比問題可以解決。

來源

2014-09-24 07:40:51

+0

但我需要在'header-wrapper'的頂部和底部保留一些空間，如果我刪除了margin，那麼我必須使用填充。 – Learning 2014-09-24 07:46:03

0

U在.archive-year .header-wrapper和.header中有3個餘量。

將其更改爲此

.header-wrapper {width：100％;背景色：＃000;最小高度：300像素; margin：0px auto;} .header {background-color：＃000;背景色：紅色;寬度：800像素; margin：0px auto;} 。存檔年{位置：相對;寬度：100％; margin：0px 10px;字體大小：20像素顏色：#CCC;}

來源

2014-09-24 07:41:21 Seregmir

2

利潤率在大多數地方 u可以使用填充代替

檢查撥弄我已經做出了一些改變

JS Fiddle

.archive-year{ 
    padding: 10px 10px 0 10px; 
}
的使用

來源

2014-09-24 07:42:02

2

這是你的CSS規則之一：

.header-wrapper{... margin:30px auto;}

您可以定義30px的頂部邊距。我發現通過逐步刪除規則並檢查頁面的外觀如何。

來源

2014-09-24 07:52:21 maikel

相關問題

 相關問題