html 5定位有或沒有div

我想知道是否對於this site url的演示索引頁，我可以防止文本溢出，或者說讓文本在藍色框底部時使用可選的滾動條？我希望佈局類似於this 'production' site（使用服務器統計信息訪問）。html 5定位有或沒有div

我可以使用html 5嗎？我是否應該包含div，以便在某個屏幕分辨率下限制文本溢出。請找到所用的html和樣式表代碼（感謝這個設計的作者以及Aayushi Jain，他在本網站的另一個問題上幫助我完成了一些樣式表調整）。

樣式表

html { 
    overflow-y: scroll; } 

div#wrapper { 
    width:90%; 
    margin: 10px auto; 
    position: relative;} 

header#site { 
    height:80px; 
    padding:10px; 
    background-color:#0033FF; 
    margin:10px 0px; 
    text-align:center; } 

footer { 
    font-size:0.8em; 
    clear:both;} 

footer .col { 
    width:30%; 
    margin:1% 1.1%; 
    padding:2px; 
    height:100px; 
    background-color:#F63; 
    float:left; } 


nav { 
    background-color:#0033FF; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    top: 110px; 
    width: 29%; } 


nav ul { 
    list-style:none;} 


nav ul li a { 
    display: block; 
    background-color:#CCC; 
    margin-right: 20px; 
    width: 110px; 
    line-height:1.5em; 
    text-align: center; 
    text-decoration: none; 
    color: #000; } 

nav ul li a:hover { 
     color: #fff; 
     background-color:#39C; } 

article { 
    background-color:#0066FF; 
    float:right; 
    width:69%; 
    margin-right:10px; 
    height:50%; 
    overflow-y:scroll; 
     } 

article header { 
    background-color:#F90; 
    padding:15px; } 

section#abstract { 
    font-size:1.09em; 
    font-style:italic; 
    margin:10px 0px; 
    text-align:justify; 
    padding:5px 80px; } 

section#main { 
    font-size:1em; 
    padding:20px; 
    text-align:justify; 
    float: left; 
    margin: 0; 
    padding: 0; 
    display: inline; } 

.ads { 
    height:50%; 
    width:30%; 
    background-color:#0033FF; 
    margin-bottom:1%; 
    float:left;} 

.ads p:first-child { 
    padding:15px; 
    font-size:2em;} 

.ads p:last-child { 
    padding-left:15px; 
    font-size:1em;color:#CCC;}

html文件

<!DOCTYPE html> 
<!-- saved from url=(0064)http://toytic.com/class/examples/e808_html5_Header2NavAside.html --> 
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<meta charset="utf-8"> 
<title>Web site</title> 
<link href="style.css" rel="stylesheet" /> 
<style> 

</style> 

<!-- Tell IE we are using html5 + CSS --> 
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> 

</head> 
<body> 
<div id="wrapper"> 
    <header id="site"> 
     <h1>WEBSITE</h1> 
    </header> 

    <article> 
     <header> 
      <h2>This is the article header</h2> 
      <time datetime="25-11-2010" pubdate="">25th November 2010</time> 
     </header> 
     <section id="abstract"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et orci sed neque tincidunt dictum nec at lacus. Fusce feugiat sagittis ligula ac aliquam. Integer ut sodales justo. Etiam ultrices cursus iaculis. Suspendisse bibendum. </p> 
     </section> 
     <section id="main"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac velit mauris. Nulla cursus pretium dapibus. Fusce at faucibus mi. Etiam ac nisi condimentum quam vulputate euismod. Nunc viverra consectetur tempor. Praesent rutrum diam in leo lacinia sit amet volutpat leo tempus. Donec sodales, velit et viverra imperdiet, velit leo placerat libero, fringilla scelerisque justo sapien sit amet sapien. Donec blandit tellus at mi hendrerit hendrerit. Sed suscipit sagittis sodales. Etiam sagittis, tortor quis sagittis laoreet, erat nibh mollis sem, ut tristique felis augue non metus. </p> 
      <p>Etiam in gravida mi. Maecenas placerat, justo vel gravida egestas, odio sem dictum justo, eget volutpat massa augue in augue. Sed tempus sem a nulla eleifend aliquet aliquet diam pharetra. Proin sit amet imperdiet est. Cras vitae felis in nulla tristique porttitor ut sit amet neque. Quisque sed nisi quam. Aliquam erat volutpat. Nullam dignissim augue odio. Nam sit amet ipsum arcu, id rutrum felis. Phasellus velit mauris, dictum eget tincidunt eget, condimentum eget risus. Proin nibh nulla, sagittis et feugiat in, luctus quis velit. Aenean lobortis mi ut odio accumsan adipiscing. Nulla quis ipsum magna. Suspendisse auctor mauris eu mi cursus ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas gravida vulputate leo, consectetur porta sem euismod nec. Donec et dolor lectus, vel cursus massa. Morbi eu dictum arcu. Fusce luctus porttitor neque, sed eleifend orci tristique convallis. </p> 
     </section> 
    </article> 

    <nav> 
    <ul> 
     <li>About</li> 
     <li>Service</li> 
     <li>Contact</li> 
    </ul> 
    </nav> 

    <footer> 
     <div class="col"> 
      <h4>Contact</h4> 
      <adress> 
       <p><a href="http://toytic.com/class/examples/e808_html5_Header2NavAside.html#">Janet Griffith</a> from Public Relations</p> 
       <p><a href="http://toytic.com/class/examples/e808_html5_Header2NavAside.html#">Jil Sanders</a>, webmaster</p> 

     </adress></div> 
     <div class="col"> 
      <h4>Sites of interest</h4> 
      <aside> 
       <p><a href="http://toytic.com/class/examples/e808_html5_Header2NavAside.html#">Site A</a></p> 
       <p><a href="http://toytic.com/class/examples/e808_html5_Header2NavAside.html#">Another one</a></p> 
      </aside> 
     </div> 
     <div class="col"> 
      <h4>Legal stuff</h4> 
      <p>Copyright</p> 
      <p>Terms of Service</p> 
     </div> 
    </footer> 
    </div> 


</body></html>

感謝

帕斯卡爾

來源

2013-07-20 pascalb

兄弟你的問題涉及到css – Hushme

HTML5定位和HTML4定位有什麼區別。 – Adrian

從我對html5的理解中，div等標籤可以替換爲section，headers，footers ...但似乎適用於div的屬性不適用於html 5標籤，例如overflow：auto – pascalb

如果你不希望看到滾動條，然後用overflow: hidden或overflow: auto。

現在，如果你想要標題部分是靜態的，那麼把你的部分主要和抽象的div並使其height: 500px (or something you want)，但使其修復，然後在新瘋狂的div使用overflow: hidden，如果你不想顯示溢出部分或使用overflow: auto如果你想顯示溢出部分而不是滾動條。

來源

2013-07-21 04:25:15

html 5定位有或沒有div

回答

相關問題