HTML：< p>标签下推浮动< div> [英] HTML: <p> tag pushes down floating <div>

问题描述

我正在开发一个网站设计（重新学习HTML和CSS，因为我几年来没有使用它们），我遇到了一个似乎是一个相当简单的问题，一个我相信我之前遇到过，但不记得如何修复。

在我的设计中，我的主要内容在页面左侧，在右侧： jsfiddle 。边栏是float：right;，内容容器是float：right ;.问题是，哪一个元素出现首先推下另一个元素。

 <$> 
 c $ c> ... 
< div id ='page-container'> 
< aside id ='sidebar'> 
< div class ='sidebar-item'> 
< p>侧栏< / p> 
< / div> 
< / aside> 
 
< main id ='body-container'> 
< h1 id ='main-title'>欢迎来到WebsiteName！< / h1> 
< p> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Praesent ut erat 
 volutpat，semper metus id，suscipit justo。 Maecenas ut lacus sit amet lacus 
 elementum tempus。 Suspendisse sit amet sem venenatis，mollis enim vel，
 vehicula nisi。雪松Curabitur vehicula sem in 
 volutpat vulputate。 Maecenas feugiat ipsum quis quam euismod lacinia。在
 congue vel dui ac dignissim。 Maecenas iaculis，odio fermentum tincidunt 
 aliquam，elit massa tristique nisl，quis fringilla nisl purus sed risus。 
 Cras malesuada posuere elit sed auctor。 Phasellus hendrerit adipiscing 
 commodo。< / p> 
< img id ='image'src ='logo.svg'alt ='PollardNET |首页'/> 
< / main> 
 
< div class ='cleararer'> 
<！ - 需要确保浮动正常工作！ 
< / div> 
< / div> 
 ... 
  

CSS：

  ... 
 #sidebar {
 float：right; 
 margin：100px; 
 margin-left：50px; 
 margin-top：50px; 
 width：250px; 
 padding：5px; 
 padding-left：20px; 
 border-left-style：solid; 
 border-left-width：2px; 
 border-left-color：＃a4a4a4; 
} 
 
＃body-container {
 float：left; 
 position：relative; 
 margin：100px; 
 margin-right：427px; 
 margin-top：50px; 
} 
 ... 
 .clearer {
 clear：both; 
} 
 ... 
  

如果我删除任何文本从内容部分，问题似乎消失了。出于某种原因，这在jsfiddle中不起作用，但在Chrome中显示。

解决方案

删除 float：left; 从＃body-container 。一般来说，你不需要为每边指定两个浮点，只有一个浮点就足够了。请参见更新的JSFiddle 。

I'm working on a website design (relearning HTML and CSS, as I haven't used them for several years), and I've come across what appears to be a rather simple problem, and one I'm sure I've come across before, but can't remember how to fix.

In my design, I have the main content to the left of the page, and a sidebar to the right: jsfiddle. The sidebar is float: right;, and the content container is float: right;. The problem is, which ever element appears first pushes down the other element. I want them to sit side by side next to each other.

HTML:

...
<div id='page-container'>
<aside id='sidebar'>
  <div class='sidebar-item'>
    <p>Sidebar</p>
  </div>
</aside>

<main id='body-container'>
  <h1 id='main-title'>Welcome to WebsiteName!</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut erat
    volutpat, semper metus id, suscipit justo. Maecenas ut lacus sit amet lacus
    elementum tempus. Suspendisse sit amet sem venenatis, mollis enim vel,
    vehicula nisi. Phasellus sed condimentum ligula. Curabitur vehicula sem in
    volutpat vulputate. Maecenas feugiat ipsum quis quam euismod lacinia. In
    congue vel dui ac dignissim. Maecenas iaculis, odio fermentum tincidunt
    aliquam, elit massa tristique nisl, quis fringilla nisl purus sed risus.
    Cras malesuada posuere elit sed auctor. Phasellus hendrerit adipiscing
    commodo.</p>
  <img id='image' src='logo.svg' alt='PollardNET | Home' />
</main>

<div class='clearer'>
  <!--Needed to ensure floats work correctly!-->
</div>
</div>
...

CSS:

...
#sidebar {
  float: right;
  margin: 100px;
  margin-left: 50px;
  margin-top: 50px;
  width: 250px;
  padding: 5px;
  padding-left: 20px;
  border-left-style: solid;
  border-left-width: 2px;
  border-left-color: #a4a4a4;
}

#body-container {
  float: left;
  position: relative;
  margin: 100px;
  margin-right: 427px;
  margin-top: 50px;
}
...
.clearer {
  clear: both;
}
...

If I remove any text (p tags) from the content section, the problem seems goes away. For some reason this does not work in jsfiddle, but shows in Chrome. Does anyone know how I can fix this?

解决方案

Remove float: left; from your #body-container. Generally speaking you don't need to specify two floats for each side, only one float is enough. See updated JSFiddle.

这篇关于HTML：< p>标签下推浮动< div>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！