html - 将两列彼此相邻对齐而不将它们从容器中删除？

Question

<div class="container">
   <div class="content">
   </div>
   <div class="sidebar">
   </div>
</div>

在上面的示例中，如果不使用浮动，我似乎无法让内容和侧边栏彼此相邻显示。使用浮点数是可行的，但它会将它们从内容类的边界中删除。

Answer 1

jsFiddle Demo

你正在寻找的是一个内联块

示例 html

<div class="container">
 <div class="content">
 </div>
 <div class="sidebar">
 </div>
</div>

css

.content, .sidebar
{
 display: inline-block;
}

Answer 2

.content{display:inline-block;}
.sidebar{display:inline-block;}

Answer 3

如果我的问题是正确的，那么问题不在于它float本身，而在于floats.

您可以使用floats并在您的课程中添加一个 clearfix .container：

.container:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

<div style="clear: both"></div>这与在底部 html 中添加的方式相同.container