Have Geek Brain

CSS / JS: evenly spaced elements across multiple lines

How would you feel about spreading elements evenly across multiple lines, for example:

wrapper div: <div style="text-align: center">
elements inside: <div style="display: inline-block;
                 padding-left: 10px; padding-right: 10px;">Element</div>

Instead of having only one element on the next line (wrapped):

Element 1        Element 2        Element 3        Element 4        Element 5
                          Element 6

It does this by expanding the elements:

Element 1        Element 2        Element 3
Element 4        Element 5        Element 6
+2


a source to share


3 answers


If the width of the elements and their number are not fixed, I would write code that generates custom markup depending on the situation.

However, this can seem daunting because it is difficult (actually impossible) to calculate the actual pixel size of a text block using the web environment (without knowing which font the browser will use and getting its metrics).



I would suggest deciding on the number of columns in advance (2 or 3) and then using elements with their widths set to 50%

or 33%

and text-align

for the property center

.

+1


a source


How about specifying the "width" style?



<div style="width: 50px; display: inline-block; padding-left: 10px; padding-right: 10px;">Element</div>
0


a source


Float them all to the left, up to 50% or 33% width or whatever you need.

Then clean the float.

0


a source






More articles:


All Articles