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

オーバーフロー: 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 に答える
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 に答える
0

2 番目の段落には幅が必要であり、フロートも必要だと思います。

于 2012-04-30T19:26:27.410 に答える
0

p2 番目のタグに幅を必要としない別のオプション:

<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 に答える
0

両方の段落にawidthとの両方を設定する必要があります。ラッピング DIV にfloat:leftは必要ありません。float:left

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