将一个文本向左浮动，另一个向右浮动答案

【问题标题】：Floating one text to left, other to right将一个文本向左浮动，另一个向右浮动
【发布时间】：2013-10-04 05:14:54
【问题描述】：

我正在尝试将一个 p 标签浮动到左侧，另一个 p 标签浮动到右侧。它们与父级共享相同的 div。我无法做到这一点。右侧文本在水平方向上正确定位，但在垂直方向上位于左侧文本下方。代码如下：

<div>
    <p id="t1">Text1</p>
    <p id="t2">Text2</p>
</div>

div {
    border: 1px solid red;
}
#t1 {
    border: 1px solid green;
    display: inline;
}
#t2 {
    border: 1px solid blue;
    display: inline;
    float: right;
}

这是我得到的结果：http://jsfiddle.net/JJB2s/ 现在，如果我尝试将 t1 文本向左浮动，它们都处于相同的垂直水平，但它们似乎比应有的低得多。我不太清楚为什么会发生这种情况以及如何解决它，有人可以向我解释一下吗？提前致谢！

【问题讨论】：

这里是你的小提琴的更新..jsfiddle.net/JJB2s/12
只需从 div 的 css 中删除 display:inline 并在 #t1 中添加 float:left 或 Float:right。您将获得正确的行为。

标签： html css text css-float

【解决方案1】：

我会使用浮点数来实现它。现在你没有让它们都浮动，并且正在尝试使用内联显示来让它们对齐。这是修复此问题的更新小提琴：

http://jsfiddle.net/JJB2s/13/

CSS 复制如下：

div {
    border: 1px solid red;
    overflow: hidden;
}

#t1 {
    border: 1px solid green;
    float: left;
}

#t2 {
    border: 1px solid blue;
    float: right;
}

请注意，将overflow: hidden 放在容器上可以防止它崩溃，因为它包含浮动。如果您实际上不希望隐藏溢出，则可以使用clearfix 实现相同的效果

【讨论】：

不错！为什么它实际上以如此大的幅度浮动它们？为什么他们没有触及 div 的顶部？
这是因为段落标签带有来自用户代理样式表的边距。您可以根据需要重置这些：jsfiddle.net/JJB2s/14
您所看到的称为margin collapse。非浮动元素的边距折叠（与前一个元素的边距合并），但浮动元素不会。

【解决方案2】：

添加margin-top:0px;右边

像这样

#t2 {
border: 1px solid blue;
display: inline;
margin-top:0px;
float: right;
}

【讨论】：

这似乎可以很好地解决问题，但是它们之间仍然存在 1-2 px 的差异。这是为什么呢？

【解决方案3】：

这样做是因为有两个段落。默认情况下，HTML 将在新行中显示每个段落。是的，通过设置 margin-top: 0px;

【讨论】：

【解决方案4】：

设置边距和内边距为 0； http://jsfiddle.net/JJB2s/15/

div, #t1, #t2{
margin:0px;
padding:0px;
}
div {
    border: 1px solid red;
}
#t1 {
    border: 1px solid green;
    display: inline;
    float:left;
}
#t2 {
    border: 1px solid blue;
    display: inline;
    float: right;
}

【讨论】：

【解决方案5】：

我喜欢 Jeff Escalante 的回答（我也赞成），但这是另一个具有相同效果的解决方案。这只是为了展示另一种方法..使用他的答案。

这是Working Fiddle

div {
    border: 1px solid red;
}
div:after
{
    content: '';
    clear: both;
    display: block;
}
#t1 {
    border: 1px solid green;
    float: left;
}
#t2 {
    border: 1px solid blue;
    float: right;
}

【讨论】：