How to arrange the blocks horizontally so that when they reach the border of the parent, they are not transferred to a new line, but continue the current one?

Question

I solved the problem by writing the following code:

.block { display: inline-block; height: 100px; background: #8BC34A; margin: 2px; } .parrent { display: block; position: relative; width: 550px; padding: 0 10px; border: 2px solid red; padding-bottom: 100px; } .child { display: inline-flex; width: auto; /*transform: translateX(-394px);*/ }

 <div class="parrent"> <div class="child"> <div class="item-1 block" style="width: 200px">1</div> <div class="item-2 block" style="width: 120px">2</div> <div class="item-3 block" style="width: 300px">3</div> <div class="item-4 block" style="width: 70px">4</div> <div class="item-5 block" style="width: 350px">6</div> <div class="item-6 block" style="width: 200px">7</div> </div> </div>

But display: inline-flex; It seems to me not the best solution, not very cross-browser.

Maybe there is some way to solve the issue using older styles?

Qwertiy ♦ Qwertiy 76k 17 73 199 · Accepted Answer · 2016-11-30T16:54:59

 white-space: nowrap;

should help:

 .block { display: inline-block; height: 100px; background: #8BC34A; margin: 2px; white-space: normal; } .parrent { display: block; width: 550px; padding: 0 10px; border: 2px solid red; padding-bottom: 100px; white-space: nowrap; }

 <div class="parrent"> <div class="item-1 block" style="width: 200px"> 1 </div><div class="item-2 block" style="width: 120px"> 2 </div><div class="item-3 block" style="width: 300px"> 3 </div><div class="item-4 block" style="width: 70px"> 4 </div><div class="item-5 block" style="width: 350px"> 6 </div><div class="item-6 block" style="width: 200px"> 7 </div> </div>

How to arrange the blocks horizontally so that when they reach the border of the parent, they are not transferred to a new line, but continue the current one?

1 answer 1

More articles: