The site has a page with news thumbnails. All thumbnails are arranged in 2 columns, have the same width, but different heights. Actually, different heights prevent the thumbnails from being correctly positioned in 2 columns. It would be easy if the columns were of a fixed width, but their width was rubber (50%). Please tell me how to solve the problem - referring to the fidl

  • I forgot to add that due to a non-fixed width, a non-fixed height automatically appears, since when the thumbnail "stretches" the text constantly adds / removes lines, which is why the height itself changes. - Vladimir Fedulkin

4 answers 4

Here is a solution to your problem.

Good luck

Learn to use the search engine ...

  • an interesting solution was described there, but I went the simplest way, wrote a script, which after each second block inserts one more, with clear: left; profit! - Vladimir Fedulkin
  • one
    Yes, this is certainly an option, but I think that you should not use JS where CSS can do it. - Astor

You may need to create two classes: one with float: left, width: 50%, the second with float: right, width: 50%, and in these you already have containers

  • From the point of view of server programming, this is not appropriate. - Vladimir Fedulkin

try after each second element to put the div style = "clear: both" / div

    Usually the opposite is the case: "wrapper" - "wrapper". Accordingly, first item-wrapper, inside which item. Anyway...

    Option with display: inline-block does not roll?

    we get something like this:

    #container { } .item { width: 50%; display: inline-block; vertical-align: top; *display: inline; zoom:1; } .item-wrap { outline: solid 1px black; margin: 10px; padding: 5px; }

    In .item: inline and zoom are only needed for IE7, since the latter does not understand inline-block. Alternatively, you can put it in a separate plug-in css.

    Next, there are subtleties. If you perform as is, then the columns will still not work. The fact is that the inline-block makes the elements behave as string, that is, the white-space property is applied to them.

    You can solve the problem in 4 ways.

    1. do not use breaks:

      <div class = "item"> ... </ div> <div class = "item"> ... </ div>

    instead

     <div class="item">...</div> <div class="item">...</div>

    1. negative margin.

      .item {width: 50%; display: inline-block; vertical-align: top; * display: inline; zoom: 1; margin: -1px; }

    2. Set the font size to zero for the container.

      container {font-size: 0;}

    and restore it to

     .item {font-size: 12px;}

    1. well, the last to override the letter- and word-spacing on the container and restore it to the item.

      container {

       letter-spacing: -.5em; *letter-spacing: normal; word-spacing: -.5em;

      }

      .item {width: 50%; display: inline-block; vertical-align: top; * display: inline; zoom: 1; letter-spacing: normal; word-spacing: normal; }