オーバーフローオートを使用してフローティングテキストを並べて表示

Question

他の段落の右側に表示する段落を取得しようとしていますが、現在その段落の下に表示されています。私はオーバーフローオートを使用しようとしていますが、どこに行くのか分かりません。

<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

オーバーフロー：自動親の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 2

あなたは、第二段落の幅を必要と私はまた、彼らはまた、フロートする必要があると思います。

Answer 3

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

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

Answer 4

デモ：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 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>