我正在用 HTML5 重新制作一个关于 Old Treasures Furniture and Imports 的网站。
我对 aside 和 article 标签的定位有疑问。他们似乎非常喜欢头球，以至于他们在他之上。
我尝试将两者(aside 和article)的位置设置为relative, absolute, 固定。我已经尝试过 overflow: hidden; 正如有人在我阅读的另一个线程中建议的那样。没有人正确定位它们，因为它们应该出现:
__________________________
|Header |
|------------------------|
|aside|article |
| | |
|_____|__________________|
|footer |
|------------------------|
只有页脚在他的正确位置。
我的index.php:
<!DOCTYPE html>
<html>
<head>
<!-- Imports page's CSS style -->
<link href="01d7r345ur3557y13.css" rel="stylesheet" type="text/css" />
<!-- Sets Page FavIcon -->
<link rel="shortcut icon" href="http://i.imgur.com/V6a6eGp.png" />
<title>Old Treasures Furniture and Imports</title>
</head>
<body>
<!-- Page Header/Banner Begin -->
<header alt="Old Treasures Furniture and Imports" />
<!-- Page Header/Banner End -->
<!-- Navigation Buttons Begin (Home, Products, Services, Contact) -->
<aside>
<?php
include("aside.php");
?>
</aside>
<!-- Navigation Buttons End -->
<!-- Content of Page Begin -->
<article>
<img class="wagon" src="http://i.imgur.com/1hg8f8H.jpg" />
<p>Welcome to Old Treasures Furniture and Imports, <br />We are a company dedicated to the manufacture and marketing of solid wood products.<br />Our services are oriented to decorators, builders, architects and clients like you.</p>
</article>
<!-- Content of Page End -->
<!-- Footer of Page Begin (Copyright, "Inline"-Share) -->
<footer>
<?php
include("footer.php");
?>
</footer>
<!-- Footer of Page End -->
</body>
</html>
还有我的01d7r345ur3557y13.css:
(我省略了其余的 CSS，我怀疑它们对此有影响。)
body {
margin: 0;
padding: 0;
background: url("http://i.imgur.com/kRh8uzK.png?1") fixed;
}
header {
width: 65%;
height: 250px;
background-image: url("http://i.imgur.com/jxzkFhn.jpg");
background-size: 100% 100%;
margin: 20px auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
article {
border: 1px #fff solid;
overflow: hidden;
}
footer {
background: url("http://i.imgur.com/x1WvVZp.png");
text-align: center;
color: #FFF;
}
footer p {
font-size: 10px;
}
header, footer, aside, article {
display: block;
}
/*Page Navigation*/
aside {
float: left;
width: 120px;
margin: 0;
}
aside li {
display: block;
}
aside ul {
margin: 0;
padding: 0;
}
.home {
background: url("http://i.imgur.com/ma42CHH.png");
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
webkit-transition: background .25s ease-in-out;
width: 119px;
height: 31px;
}
.home:hover {
background: url("http://i.imgur.com/iKLHtvh.png")
}
.products {
background: url("http://i.imgur.com/sqBqNwp.png");
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
webkit-transition: background .25s ease-in-out;
width: 119px;
height: 31px;
}
.products:hover {
background: url("http://i.imgur.com/hRGXnqt.png?1");
}
.services {
background: url("");
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
webkit-transition: background .25s ease-in-out;
width: 119px;
height: 31px;
}
.services:hover {
background: url("");
}
.contact {
background: url("http://i.imgur.com/etMulj7.png");
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
webkit-transition: background .25s ease-in-out;
width: 119px;
height: 31px;
}
.contact:hover {
background: url("http://i.imgur.com/v4ZA6LH.png");
}
截至目前，我仍在尝试其他方法来解决此问题。非常感谢!
这是当前的网站以及元素的定位方式。 http://www.oldtreasuresfurniture.com/
这就是我目前得到的:
最佳答案
1) 我在这里看到的一个问题是，您使用了 header 标签作为自闭标签。
2) 确保已清除必要位置的 float ，例如- http://www.w3schools.com/cssref/pr_class_clear.asp
3) 如果您分享您遇到问题的页面的 URL，这将更有利于调试。
关于php - Aside 和 Article 重叠标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28758523/