Justification of inline divs in CSS

Question

Here is what I have in html:

<div class="row" id="row1"> <div class="box" id="box1"> </div> <div class="box" id="box2"> </div> <div class="box" id="box3"> </div> </div> 

And here is what I want to do with it:

If the red arrows are the same length , regardless of the width of row1 (or only 3 fields)

Attempt

Here is my css:

 /* 1 row per line */ .row { display: block; text-align: center; } /* and the box is inline */ .box { display: inline-block; text-align: justified; height: 50px; margin: 0 auto; } 

Result:

If the green arrows are the same length

I temporarily defined their width as

 #box1 { width: 50px; } #box2 { width: 90px; } #box3 { width: 50px; } 

If I give w = line width,
the interval should work for any w> = amount (width of children's boxes)

But according to Firebug, the boxes do not even have margin: 0 auto; margins margin: 0 auto;

I will do this for some time without any success. Any help would be appreciated.

---

EDIT

Ultimately, I will have a <div class="window"></div> containing an arbitrary number of rows, where each row additionally contains an arbitrary number of boxes.

I determine the width and height of each field, then the sizes of the rows and windows are changed accordingly (which by default is an element of the block level);

• The row height is the highest height of all its child boxes.
• Window height is the sum of all row heights
• Window width is the width of the row with the largest sum of the width of all its child boxes.

The first 2 are automatic, but for the third I can install it after I have finished working with all the lines. Now the rest of the line will be filled in width ( .row {width: 100%; } ). But then some of the lines may contain a field with a total width that is less than the width of the window.

The end result will be something like this:
Where the arrows (spaces) of the same color should have the same width. (In the case of the second line in the picture, the interval is simply 0. The width of the window (and all other lines) corresponds to its width)

A general approach is preferred.

---

Go to script issue

Answer 1

If you are well versed (unlike me). You can use positioning. Something like that:

I save 2.5% space among the elements. Instead, you can use a fixed space. Also, give some min-width to limit more compression of the elements.

Working script

Update:

Since the gap between the children changes when the window is resized, you need to perform calculations dynamically.

JavaScript:

 function setAlign(parentClass, childCommonClass) { var childDivs = document.getElementsByClassName(childCommonClass); var childDivsTotalWidth = 0; var childDivsLength = childDivs.length; var parentElement = document.getElementsByClassName(parentClass)[0]; var parentElementWidth = parentElement.offsetWidth; for (var i = 0; i < childDivsLength; i++) { childDivsTotalWidth += childDivs[i].offsetWidth; } var remainingWidth = parentElementWidth - childDivsTotalWidth; var gap = remainingWidth / (childDivsLength + 1); var leftWidth = gap; for (var j = 0; j < childDivsLength; j++) { if (j > 0) { leftWidth += gap + childDivs[j - 1].offsetWidth; } childDivs[j].style.left = leftWidth + "px"; } } window.onload = setAlign('row', 'box'); window.onresize = function () { setAlign('row', 'box'); } 

Updated Fiddle

Answer 2

You can do this by applying the following css:

 #wI-row1 { width: 600px; /* width: 100%; */ text-align: justify; margin: 0 auto; } #wI-row1:after{ content: " "; width: 100%; display: inline-block; } 

demo

Edit

According to your changes:

You should wrap your entire div div, suppose

 <div class="wrapper"> <div class="row" id="wI-row1"> <div class="box" id="wI-Level"> </div> <div class="box" id="wI-Faction"> </div> <div class="box" id="wI-Gender"> </div> </div> <div class="row" id="wI-row2"> <div class="box" id="wI-Level"> </div> <div class="box" id="wI-Faction"> </div> <div class="box" id="wI-Gender"> </div> </div> </div> 

So now don't set the width to # wI-row1, # wI-row2, since you defined the width in .box, everything will be fine. Just set the width of the .wrapper.

Comment

To make text-align work: justify the width, you need to give 100% using display: inline-block;

Answer 3

I think you can achieve your goal by setting margin-left (?) To 50px and row last children margin-right: 50px and changing the string class to text-align: left

it might be better to use float instead of display-block

Answer 4

Mr_Green's answer is very good, especially since it takes into account window resizing.

We can avoid absolute positioning by using marginLeft instead of left. My approach uses percentages:

 function justify(container) { var ch= container.children; var norm= container.offsetWidth/100; for(var chWidth=0, i=0 ; i < ch.length ; i++) { chWidth+= ch[i].offsetWidth/norm; } var Dpercent= (100-chWidth)/(ch.length+1); for(var i = 0 ; i < ch.length ; i++) { ch[i].style.marginLeft= Dpercent+'%'; } } //justify window.onresize= window.onload= function() { justify(document.getElementById('row1')); }