Layout: align blocks in width

Question

HTML

There is a set of view blocks and so on. the width and height of the blocks are fixed, say, 250*150. you need to align them, placing them in a row of 4 or 3 pieces, depending on the resolution. for example, from 1024 to 1280 we put 3 blocks in a row, above 1280 we put 4 blocks. the blocks must occupy all the free space in the row. who can tell?
<div class="item">
1
</div>
<div class="item">
2
</div>


Answer 1

Solving your problem in a great way: http://www.deviantart.com/

Answer 2

I don't think it's possible to do without scripts. Made an example using jQuery. Checked only in FF 3.6:

<style>
  div.item {width: 250px; height: 150px; background: red; float: left;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
  $(function ()
  {
    changeMargin();
  });
  $(window).resize(function()
  {
    changeMargin();
  });
  function changeMargin()
  {
    var container_width = $('div.container').width();
    var item_width = $('div.item').width();
    var items_count = Math.floor(container_width / item_width);
    var items_width = item_width * items_count;
    var difference = container_width - items_width;
    var margin = difference / (items_count - 1);
    $('div.item').each(function(index)
    {
      if (index > 0 && index % items_count != 0)
        $(this).css('margin-left', margin+'px');
      else
        $(this).css('margin-left', '0px');
    });
  }
</script>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>

Answer 3

And where do you want the 4th block to go at low resolution ???
If you know in advance how many blocks there will be, then the easiest way is to make a table.

Answer 4

Well, if all the blocks are fixed and the same size, then just tell them all “float: left” and everything is short-lived.
They will line up as many as fit in the window. The excess will be carried over to the next row.
Just don't forget to clear the stream at the end ("clear: both").

Answer 5

Hmm… no, with justify the last line is not centered. It aligns to the left.
But the fact that the distance between the blocks will almost certainly break in it is yes.

Answer 6

As an option, create a DIV with a certain height (you have 150px) and overflov:hidden, when 4 blocks are placed, they will all show up, and if the 4th one does not fit, it will go to the next line and will not be visible. everything below is closed for display.

Answer 7

see how Yandex search is made by pictures. Looks like it's the tables.

Answer 8

content is generated on the server.

Answer 9

The question, as I understand it, comes down to centering float-blocks. The task is not trivial.
The working solution is, perhaps, the only one, I once used it in my work
www.cssplay.co.uk/menus/centered.html