使用溢出自动并排浮动文本

Question

我试图让一个段落显示在另一个段落的右侧，但它现在出现在它下面。我试图使用溢出auto但不确定它应该去哪里。

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

Answer 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>​

Answer 2

溢出：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>​

Fiddle

Answer 3

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

Answer 4

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

<p style="width: 400px; border-right: 2px solid black; float:left;">

Answer 5

另一个不需要第二个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>