html - 使用溢出自动并排 float 文本

Question

我试图让一个段落显示在另一个段落的右侧，但它目前显示在它的下方。我正在尝试使用 overflow 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

overflow: auto 属于父 div，您需要在两个 float 元素上设置宽度。试试这个:

<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