Help arrange three blocks in a row for the entire width of the screen, so that the left and right have a fixed width, and the average is adaptively compressed to min-width. And that they were tightly glued to each other.

<div style="width: 100%; height: 100px;"> <div style="width: 100px;">1</div> <div style="min-width: 500px">2</div> <div style="width: 200px;">3</div> </div>

    1 answer 1

    One of the options with float'ami (to beat the n-th and 3rd on the edges, and the middle to give the remaining space):

     .wrapper { width: 100%; height: 100px; min-width: 700px; } .div-1 { float: left; background: #FDD; width: 100px; } .div-3 { float: right; background: #DFD; width: 100px; } .div-2 { min-width: 500px; margin: 0 100px 0; background: #EEF; } 
     <div class="wrapper"> <div class="div-1">1</div> <div class="div-3">3</div> <div class="div-2">2</div> </div>