html - 一个文本向左浮动，另一个向右浮动

Question

我试图将一个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 文本向左浮动，它们都处于相同的垂直水平，但它们似乎比它们应该低得多是。我不太清楚为什么会发生这种情况以及如何解决它，有人可以向我解释一下吗？提前致谢！

Answer 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实现相同的效果

Answer 2

添加边距顶部：0px；向右

像这样

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

Answer 3

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

Answer 4

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

这是一个工作小提琴

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

Answer 5

将边距和内边距设置为 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;
}