Can you please tell how you can arrange several divs in one line so that even if their total width exceeds the width of the container, they still would not be transferred to a new line, but just not trimmed divs.

    4 answers 4

    There are many options, depending on how you want to display the blocks themselves. One with options:

    .container{overflow:hidden;width:200px} .box{white-space:nowrap} .box div{width:90px;display:inline-block;border:1px solid black} 
     <div class="container"> <div class="box"> <div>content1</div> <div>content2</div> <div>content3</div> </div> </div>

    Example

      .

       <div style="overflow: hidden;"> <div style="width: 1000%;"> <div style="float: left; width: 100px; height: 100px;">content</div> <div style="float: left; width: 100px; height: 100px;">content</div> <div style="float: left; width: 100px; height: 100px;">content++</div> </div> </div>
      • 2
        I didn't have time ... - istem

      In my opinion, the most normal solution:

       <div style="overflow: hidden;"> <div style="width: 1000%;"> <div style="float: left; width: 100px; height: 100px;">content</div> <div style="float: left; width: 100px; height: 100px;">content</div> <div style="float: left; width: 100px; height: 100px;">content++</div> </div> </div>

        I used this part for myself:

         <div style="width: 1000%;"> <div style="float: left; width: 100px; height: 100px;">content</div> <div style="float: left; width: 100px; height: 100px;">content</div> <div style="float: left; width: 100px; height: 100px;">content++</div> </div>

        and it all worked.