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

Question

我试图将一个 p 标签 float 到左侧，另一个 p 标签 float 到右侧。他们与 parent 共享相同的 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

我会使用 float 来实现它。现在你并没有让它们都 float ，而是试图使用内联显示来让它们对齐。这是修复此问题的更新 fiddle :

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 放在容器上可以防止容器折叠，因为它包含 float 。使用 clearfix 可以实现同样的效果如果您实际上不想 overflow hidden