There are 2 divs, let's call them A and B. A contains the content of a height not known in advance, from 2 lines of text to 3 scrolls of the screen. B is located next to A (side panel) and contains any amount of content of approximately known height, for example, divs from 200px to 300px in height, all too horrible.

It is necessary to balance the block A with the neighboring ones — display so many blocks inside B so that in the end they turn out to be approximately equal (± 150px). The blocks themselves do not equal the height of the task. If there is a solution without js, I would like to see it too.

Example

  • 2
    Although the task is formulated quite well, from the point of view of the final implementation, it allows several interpretations: specify where the blocks come from in B - is it a fixed set of blocks, is their number limited, are they sufficient a priori, can they be sorted in any order. - 11111000000
  • B is a fixed set of blocks, non-sortable. They can generate any number i. there are always enough of them. - Denai

2 answers 2

The algorithm is as follows:

  1. Display completely A and empty - B. Calculate the height A.
  2. In a separate, hidden (not display: none namely visibility: hidden or opacity: 0 and position: absolute ) block C display the blocks from which you can choose (or use C later as a buffer, if there are too many of them, filling it accordingly in step 3). Width C is set to width B
  3. We start the cycle with enumeration of the combinations of the heights of the blocks from C until we find a value close enough to the height A , the magnitude of their sum.
  4. Add the found combination of blocks in B

Technically, it is reasonable to load the next block in C only for the purpose of obtaining its height, and the main purpose of C is its content is invisible and should not affect scrolling at the time of iteration, but its height and height of any block embedded in it can be obtained.

On CSS, it is possible to align the A and B colors themselves in several ways:

  1. http://vanseodesign.com/css/equal-height-columns/
  2. http://callmenick.com/post/css-equal-height-columns-three-different-ways
  • Thank you, it's close to what I was thinking. And there is no way to hide the "extra" blocks without additional structures and temporary block C? (maybe css is able and I miss the useful property) As I clarified a little higher - we can load any number of blocks in B and we don’t mix them up i.e. we are interested in precisely the moment when “enough is already enough”, the final columns A and B should freely dangle alongside, not leveling the height with an empty space, only content. - Denai
  • As another option, I considered making B as high as A + run, cut off extra blocks that do not fit (there are already some implementation difficulties), then return B free height. But also does not let go the idea of ​​what should be easier. - Denai

Look towards the display: flex; property display: flex; . Full documentation . Example of implementation:

 .flexboxes { display: flex; flex-wrap: wrap; height:200px; flex-direction: column; } .flexboxes > div {width:200px;background:#000;margin:3px;} .block0 {height: 60px;} .block1 {height: 80px;} .block2 {height: 70px;} .block3 {height: 90px;} .block4 {height: 80px;} .block5 {height: 100px;} 
 <div class="flexboxes"> <div class="block0"></div> <div class="block1"></div> <div class="block2"></div> <div class="block3"></div> <div class="block4"></div> <div class="block5"></div> </div>