0

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

4

5 回答 5

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

于 2013-10-03T18:47:41.207 回答
0

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

像这样

#t2 {
border: 1px solid blue;
display: inline;
margin-top:0px;
float: right;
}
于 2013-10-03T18:41:55.673 回答
0

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

于 2013-10-03T18:47:32.690 回答
0

我喜欢 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;
}
于 2013-10-03T21:14:54.147 回答
0

将边距和内边距设置为 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;
}
于 2013-10-03T19:19:14.467 回答