2014-10-27 54 views
0

我使用了一个边框来判断我的包装只是包装了我的标题,而我却难以理解为什么......我想将标题包装到一直到页脚...任何人有任何指针?HTML5包装只包装标题(使用边框)

我见过很多文章说要指定宽度和高度设置为自动如果没有说明,对吧?

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="index.css" /> 
    <title>Personal Transportation/Errands Services</title> 
</head> 

<body> 
<header> 
    <div id="headleft"> 
     <img src="images/new logo flattened.jpg" /> 
    </div> 
    <div id="headright"> 
     (717)***-**** 
      <br /> 
     ********@yahoo.com 
    </div> 
</header> 

    <nav> 
     <a href="index.html">Home</a> 
     <a href="contact.html">Contact</a> 
    </nav> 

    <article> 
     Test 
    </article> 

    <aside> 
     <img src="images/car 1.png" id="car" /> 
    </aside> 

    <footer> 
     Ftest 
    </footer> 
</body> 
</html> 

/* Makeshift CSS Reset */ 
    { 
    margin: 0; 
    padding: 0; 
    } 

    /* Tell the browser to render HTML 5 elements as block */ 
    footer, header, aside, nav, article { 
    display: block; 
    } 

body{ 
width:940px; 
height: 100%; 
margin:0 auto; 
border-style: solid; 
border-width: 3px; 
} 

header { 
background-color: #1a8cff; 
} 

nav { 
width: 100%; 
float: left; 
text-align: right; 
background-color: #ff7f00; 
font-family: bold 'Oswald', sans-serif; 
color: #ffffff; 
letter-spacing: 1px; 
} 

a { 
text-decoration: none; 
} 

/* unvisited link */ 
a:link { 
color: #FFFFFF; 
} 

/* visited link */ 
a:visited { 
color: #FFFFFF; 
} 

/* mouse over link */ 
a:hover { 
color: #FFFF00; 
} 

/* selected link */ 
a:active { 
color: #FFFF00; 
} 

#headleft { 
display:inline; 
background-color: #1a8cff; 
width: 100%; 
} 

#headright { 
height: 87px; 
padding-top: 37.5px; 
vertical-align: middle; 
display: inline; 
float: right; 
background-color: #1a8cff; 
border-style: solid; 
border-width: 3px; 
} 

body { 
margin: 0 auto; 
width: 1000px; 
font: 13px/22px Helvetica, Arial, sans-serif; 
background-color: white; 
background-size: 100%; 
} 

article{ 
float: left; 
} 

aside{ 
float: right; 
} 

footer{ 
float:left; 
background-color: #1a8cff; 
width: 100%; 
} 

回答

0
你需要清除浮动元素

,您可以使用clearfix或空div设置为clear:both

FIDDLE

你也可以使用一个封装了页面上的每个元素的body内的包装并将其设置为overflow: hidden

ALT FIDDLE

+0

谢谢小提琴,但我不认为它有正确地工作......再次通过它......你能给我一个例子吗?我从来没有使用过这样的选择。 – 2014-10-27 01:48:09

+0

呵呵?我不知道我明白你在说什么。什么不正确? – jmore009 2014-10-27 01:54:02

+0

对不起,打电话给你小提琴大声笑..谢谢jmore – 2014-10-27 01:58:58