带有浮动元素的<div>中不需要的空间</div>

Question

我遇到问题<div>没有调整内容的大小（这是两个<p>元素）。内容浮动。

• 我有一个<p>标签浮动到左侧
• 我有一个<p>标签浮动到
• 下面有一个空的<div>标记，其中style =“clear：both”

但是，包含整个事物的<div>高3行 - 不仅仅是1，因为它应该是。我错过了什么让它起作用？

Answer 1

我准备了一个小提琴，它运作良好 - 它必须是你的代码中的错误。向我们展示一些它。

<强> Example

确保没有paddings/margins/height/lineheight影响您的div和p s（=重置浏览器默认设置！）。此外，父div需要足够宽以容纳p。此外，如果您有非浮动内容，则订单很重要。

Answer 2

首先，将<p>个标记向左浮动。

然后，确保<div>的宽度足以容纳两个<p>标记。

之后你应该可以把它们放在一行。

http://jsfiddle.net/myJ3W/1/

只是为了告诉你为什么浮动权利可能不是一个好主意（它真的取决于你想要做什么..对话框？）

如果您使用float: right;，则在段落过长后您的格式会中断：

http://jsfiddle.net/myJ3W/3/

如果你使用float: left;将它们放入容器中，你可以确定它们会粘在它们的盒子里：

http://jsfiddle.net/myJ3W/4/

同样，真的取决于你在这里想要达到的目标。

Answer 3

我相信<p>元素有默认margin，尝试将margin设置为0px，这可能会删除间距。

Answer 4

最外层<div>是否有足够的空间，以便每个<p>都是一行？如果没有，一个人会分解到另一个。此外，您同时清除<div>也将具有完整的行高。这是我应用于我在这些情况下应用的cb类的样式......

.cb
{
    clear:both !important;
    float:none !important;
    height:1px;
    line-height:0;
    margin:0;
    padding:0;
}