Question

我正在进行网站设计（重新学习HTML和CSS，因为我几年没有使用它们），而且我遇到了一个看似相当简单的问题，还有一个我以前确实遇到过，但不记得如何修复。

在我的设计中，我在页面左侧有主要内容，右侧有一个侧边栏：jsfiddle。侧边栏是float：right;，内容容器是float：right;。问题是，哪个元素首先出现压下另一个元素。我希望他们并排坐在一起。

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;
}
...

如果我从内容部分删除任何文本（p标签），则问题似乎消失了。出于某种原因，这在jsfiddle中不起作用，但在Chrome中显示。有谁知道我怎么解决这个问题？

Answer 1

从float: left;删除#body-container。一般来说，你不需要为每一侧指定两个浮点数，只有一个浮点数就足够了。请参阅updated JSFiddle。

Answer 2

您可以使用position: absolute并为两个分区设置宽度。

#sidebar {
  ...
  position: absolute;
}

#body-container {
  ...
  position: absolute;
}

Answer 3

将它放在span而不是p或p

上使用float

p {
  float:left;
};

Answer 4

如果你不想移除浮子，你也可以从身体容器上取下边缘并给它一个宽度。

浮动元素会使其成为display:block。默认情况下，HTML中的块元素将具有完整的线宽。这就是为什么如果身体容器没有设定宽度或者它没有display: inline

，身体容器会向下推侧边栏的原因

HTML：<p>标签推送浮动</p> <div> </div>

4 个答案: