将一个 div 附加到另一个 div 的右侧，但流到下一行

Question

I would like to place 3 divs (or spans) with variable length text side by size so that the text reads as if it was in a single element. I found this post on how to Attach div to the right of another div . But if I follow the method in this post, it seems as if longer spans of text show up own their own new lines. I want the box on the bottom line to start directly to the right of the second box (from right) on the top line. I want whatever text does not fit on the first line to continue on the second line. I am not sure how to do this in CSS + HTML.

<div style="position: relative;">

    <div style="font-size: 14px; display: inline; border: 1px solid green; float: left;">Lorem us turpis inasdf aadsf aasda ss</div>
    <div style="font-size: 14px; display: inline; border: 1px solid green; float: left;">Lorem us turpis </div>
    <div style="font-size: 14px; display: inline; border: 1px solid green; float: left;">Lorem us turpis inasdf aadsf aasda ss</div>

</div>

Answer 1

If you use a <span> element, it shouldn't break, but rather wrap as you'd like.

Demo tested in Safari and FF.

 .text { font-size: 14px; border: 1px solid green; }

 <div class="container"> <span class="text">Lorem us turpis inasdf aadsf aasda ss</span> <span class="text">Lorem us turpis </span> <span class="text">Lorem us turpis inasdf aadsf aasda ss</span> </div>

---

Further, if you want to use a <div> element, remove position on the container element, remove float on the child elements and simply add display: inline .

Demo

 .text { font-size: 14px; border: 1px solid green; display: inline; }

 <div class="container"> <div class="text">Lorem us turpis inasdf aadsf aasda ss</div> <div class="text">Lorem us turpis </div> <div class="text">Lorem us turpis inasdf aadsf aasda ss</div> </div>

Answer 2

This can be easily achieved by using <span> tags. I switched out your <div> tags for <span> tags and placed all 3 spans inside a <p> tag. This works with and without the <p> tag. I separated the style into a class named text for better readability. Lastly, I increased the font size so that the text is more likely to wrap on your screen and prove the point.

 .text { font-size: 25px; border: 1px solid green; }

 <div style="position: relative;"> <p> <span class="text">Lorem us turpis inasdf aadsf aasda ss</span> <span class="text">Lorem us turpis</span> <span class="text">Lorem us turpis inasdf aadsf aasda ss</span> </p> </div>