浮动元素出现在下面一行
[英]Floated element appears one line below
问题描述
Here is a very simple html code to float the sidebar towards right. 
这是一个非常简单的html代码，可将侧边栏向右浮动。 The browser output shows the sidebar (floated element) one line below. 浏览器的输出在下面一行显示了侧边栏（浮动元素）。 The link to the picture of my browser output is shown below 我的浏览器输出图片的链接如下所示
How come the floated element is displayed one line below? 浮动元素如何在下面一行显示？ Even the main content appears one line above the floated element. 即使主要内容出现在浮动元素的上方一行。
#header { background-color: #af7ac5; font-size: 90px; } #sidebar { background-color: #bdc3c7; font-size: 30px; float: right; width: 200px; display: inline-block; } #maincontent { background-color: dc7633; font-size: 30px; margin-right: 220px; } #footer { font-size: 50px; background-color: #2ecc71; clear: right; }
<p id="header">Header</p> <p id="sidebar">Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar </p> <p id="maincontent">This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content </p> <p id="footer">Footer</p>
2 个解决方案
解决方案1
1 2017-09-25 17:22:45
This happens because sidebar has an margin-top and is floated (header margin + sidebar margin). 发生这种情况是因为补充工具栏有一个上margin-top并且是浮动的（标题边距+补充工具栏边距）。
#header{ background-color : #af7ac5 ; font-size : 90px; } #sidebar{ background-color : #bdc3c7; font-size : 30px; float : right; width : 200px; margin-top: 0; } #maincontent{ background-color : dc7633 ; font-size : 30px; margin-right : 220px; } #footer{ font-size : 50px; background-color : #2ecc71 ; clear : right; }
<html> <head> <link type ="text/css" rel="stylesheet" href="MyDesign.css" > </head> <body> <p id="header">Header</p> <p id="sidebar">Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar </p> <p id="maincontent">This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content </p> <p id="footer">Footer</p> </body> </html>
Avoid using tags like p,h1 to make containers, because they have default css (margin, etc). 避免使用p，h1之类的标签来制作容器，因为它们具有默认的CSS（边距等）。 instead, use div's or appropriated tags (aside, header, footer, main, article, etc). 相反，请使用div或适当的标签（旁边，页眉，页脚，主要，文章等）。 Example: 例：
<body>
<header id="header">Header</header>
<aside id="sidebar">Sidebar Sidebar Sidebar Sidebar
Sidebar Sidebar Sidebar Sidebar
Sidebar Sidebar Sidebar Sidebar
Sidebar Sidebar Sidebar Sidebar
</aside>
<main id="maincontent">This is main content This is main content
This is main content This is main content This is main content
This is main content This is main content This is main content
This is main content This is main content This is main content
This is main content This is main content This is main content
</main>
<footer id="footer">Footer</footer>
</body>
解决方案2
0 2017-09-25 17:25:47
This occurs because the <p> tag has the following default style properties: margin-top: 30px; 发生这种情况的原因是<p>标记具有以下默认样式属性： margin-top: 30px; margin-bottom: 30px; For this reason, your <p> appears to be pushed down. 因此，您的<p>似乎被下推了。 You could either change your <p> to a <div> to avoid the default style, or simply write a CSS rule to override: p.sidebar { margin: 0px 0px 0px 0px; } 您可以将<p>更改为<div>以避免使用默认样式，也可以简单地编写CSS规则进行覆盖： p.sidebar { margin: 0px 0px 0px 0px; } p.sidebar { margin: 0px 0px 0px 0px; }
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.