1

我试图让一个段落显示在另一个段落的右侧，但它目前出现在它的下方。我正在尝试使用溢出自动，但不确定它应该去哪里。

例子

<div style="padding-left: 5px; padding-right: 5px; float: left;">
    <p style="width: 400px; border-right: 2px solid black;">
        Lorem ipsum dolor sit amet, dui purus nascetur ultrices commodo at morbi, eget nulla.
        Ipsum donec amet, facilisis pellentesque lacinia vel quis lacus leo, mollis sit
        lacinia eros dui in, nullam fermentum sollicitudin viverra. Proin cum. Vel ipsum
    </p>
    <p style="padding-left: 5px;">
        Lorem ipsum dolor sit amet, et felis, viverra at ullamcorper interdum, suspendisse
        ipsum dolor sint, lacinia nec vestibulum dolor per rutrum, lacus consequat. Architecto
        ultricies ut pellentesque sapien eget sed. Mauris justo nonummy euismod consectetuer
        pellentesque. Etiam metus vestibulum lacinia eget vitae amet, volutpat sem integer
    </p>
</div>
4

5 回答 5

1

演示：http: //jsfiddle.net/rn8k3/

<div style="padding-left: 5px; padding-right: 5px; float: left;">
    <p style="width: 48%; border-right: 2px solid black;float:left;">
        Lorem ipsum dolor sit amet, dui purus nascetur ultrices commodo at morbi, eget nulla.
        Ipsum donec amet, facilisis pellentesque lacinia vel quis lacus leo, mollis sit
        lacinia eros dui in, nullam fermentum sollicitudin viverra. Proin cum. Vel ipsum
    </p>
    <p style="width:48%;padding-left: 5px;float:left;">
        Lorem ipsum dolor sit amet, et felis, viverra at ullamcorper interdum, suspendisse
        ipsum dolor sint, lacinia nec vestibulum dolor per rutrum, lacus consequat. Architecto
        ultricies ut pellentesque sapien eget sed. Mauris justo nonummy euismod consectetuer
        pellentesque. Etiam metus vestibulum lacinia eget vitae amet, volutpat sem integer
    </p>
</div>​
于 2012-04-30T19:27:44.247 回答
1

溢出：auto 属于父 div，并且您需要两个浮动元素的宽度。试试这个：

<div style="padding-left: 5px; padding-right: 5px; overflow: auto;">
    <p style="float: left; width: 400px; border-right: 2px solid black;">
        Lorem ipsum dolor sit amet, dui purus nascetur ultrices commodo at morbi, eget nulla.
        Ipsum donec amet, facilisis pellentesque lacinia vel quis lacus leo, mollis sit
        lacinia eros dui in, nullam fermentum sollicitudin viverra. Proin cum. Vel ipsum
    </p>
    <p style="float: left; width: 400px; padding-left: 5px;">
        Lorem ipsum dolor sit amet, et felis, viverra at ullamcorper interdum, suspendisse
        ipsum dolor sint, lacinia nec vestibulum dolor per rutrum, lacus consequat. Architecto
        ultricies ut pellentesque sapien eget sed. Mauris justo nonummy euismod consectetuer
        pellentesque. Etiam metus vestibulum lacinia eget vitae amet, volutpat sem integer
    </p>
</div>​

小提琴

于 2012-04-30T19:34:25.630 回答
0

您需要第二段的宽度，我也认为它们也需要浮动。

于 2012-04-30T19:26:27.410 回答
0

您需要为两个段落设置 awidth和float:left。您不需要float:left包装 DIV。

<p style="width: 400px; border-right: 2px solid black; float:left;">
于 2012-04-30T19:27:21.123 回答
0

p第二个标签上不需要宽度的另一个选项：

<div style="padding-left: 5px; padding-right: 5px;position:relative; ">
    <p style="width: 400px; border-right: 2px solid black;display: inline-block;">
        Lorem ipsum dolor sit amet, dui purus nascetur ultrices commodo at morbi, eget nulla.
        Ipsum donec amet, facilisis pellentesque lacinia vel quis lacus leo, mollis sit
        lacinia eros dui in, nullam fermentum sollicitudin viverra. Proin cum. Vel ipsum
    </p>
    <p style="padding-left: 5px;display: inline-block;position:absolute;top:0px;right:0px;margin-left:410px;">
        Lorem ipsum dolor sit amet, et felis, viverra at ullamcorper interdum, suspendisse
        ipsum dolor sint, lacinia nec vestibulum dolor per rutrum, lacus consequat. Architecto
        ultricies ut pellentesque sapien eget sed. Mauris justo nonummy euismod consectetuer
        pellentesque. Etiam metus vestibulum lacinia eget vitae amet, volutpat sem integer
    </p>
</div>
于 2012-04-30T19:40:14.127 回答