html – Arranging multiple divs on one line

Question:

Please tell me how you can arrange several divs in one line in such a way that even if their total width exceeded the width of the container, they still would not wrap to a new line, but simply clipped divs that did not fit.

Answer:

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