Question

我正在尝试使用html5标签设计布局。当我不使用浮动时它们会起作用。但是，当我使用浮动时，他们不能工作。当我使用＆＃34; float：left＆＃34;属性并希望显示文章内联，文章来自部分。但是当我不使用＆＃34; float＆＃34;属性文章显示为块并保留在该部分内。如果我想要内联显示我的文章，而不是阻止，我该怎么办？代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5</title>
<meta charset="utf-8">

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->

<style>
body {
font-family: Verdana, sans-serif; 
font-size:0.8em;
}

header, nav, section, footer{
border:1px solid grey; 
margin:5px; 
padding:8px;
}

article{
border:1px solid grey; 
margin:5px; 
padding:8px;
width: 28%; 
float: left; 
}

nav ul {
margin:0;
padding:0;
}
nav ul li {
display:inline; 
margin:5px;
}

footer{
clear: both; 
}
</style>
</head>

<body>

<header>
<h1>HTML5 Skeleton</h1>
</header>

<nav>
  <ul>
    <li><a href="html5_semantic_elements.asp">HTML5 Semantic</a></li>
    <li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li>
    <li><a href="html5_canvas.asp">HTML5 Graphics</a></li>
  </ul>
</nav>

<section>

<h2>Famous Cities</h2>

    <article>
    <h2>London</h2>
    <p>London is the capital city of England. It is the most</p>      
    </article>

    <article>
    <h2>Paris</h2>
    <p>Paris is the capital and most populous city of France.</p>
    </article>

    <article>
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan, the center </p>
    </article>
</section>

<footer>
    <p>&copy; 2014 W3Schools. All rights reserved.</p>
</footer>

</body>
</html>

Answer 1

我相信你正在寻找inline-block显示：

article {display: inline-block}

body {
font-family: Verdana, sans-serif; 
font-size:0.8em;
}

header, nav, section, footer{
border:1px solid grey; 
margin:5px; 
padding:8px;
}

article{
border:1px solid grey; 
margin:5px; 
padding:8px;
width: 25%; 
display: inline-block; 
}

nav ul {
margin:0;
padding:0;
}
nav ul li {
display:inline; 
margin:5px;
}

footer{
clear: both; 
}

<header>
<h1>HTML5 Skeleton</h1>
</header>

<nav>
  <ul>
    <li><a href="html5_semantic_elements.asp">HTML5 Semantic</a></li>
    <li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li>
    <li><a href="html5_canvas.asp">HTML5 Graphics</a></li>
  </ul>
</nav>

<section>

<h2>Famous Cities</h2>

    <article>
    <h2>London</h2>
    <p>London is the capital city of England. It is the most</p>      
    </article>

    <article>
    <h2>Paris</h2>
    <p>Paris is the capital and most populous city of France.</p>
    </article>

    <article>
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan, the center </p>
    </article>
</section>

<footer>
    <p>&copy; 2014 W3Schools. All rights reserved.</p>
</footer>

Answer 2

它与HTML5元素无关！

它是浮动的，当你使用浮动时，元素就会脱离正常的文档流。

解决方案：使用着名的clearfix hack。

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
    line-height: 0;
}
.clearfix:after {
    clear: both;
}

在您的案例section代码中浮动的元素的父代上应用class clearfix。

<强> DEMO

html5标签或浮动属性不能正常工作

2 个答案: