Uniform distribution of elements across the entire width of the block using CSS


You can evenly distribute elements in a block (wrapper) using the CSS property of Flexbox. If you are interested in learning more about him, in the search engines it has long been written about everything. And it seems to be convenient and Can I use shows that it supports ~ 96.68% browser versions. But in practice it turns out to be a little different. There are people who use old browsers, use devices that do not support the Flexbox or sit on old versions of macOS, on which the old version of Safari, etc. ., and this property does not work and the layout goes. But there is a way to do a uniform distribution without the help of Flexbox.

Suppose we have such a set of elements:

<div class="wrapper">
	<div>element1</div>
	<div>element2</div>
	<div>element3</div>
</div>	
	

In order to evenly distribute divs inside the wrapper, the following styles should be written:

.wrapper{
	position: relative;
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: justify;
}
	.wrapper:after{
		position: relative;
		display: inline-block;
		width: 100%;
		height: auto;
		box-sizing: border-box;
		vertical-align: top;
		content: '';
	}
	.wrapper>div{
		position: relative;
		display: inline-block;
		width: 25%;
		height: 50px;
		box-sizing: border-box;
		text-align: left;
		vertical-align: top;
	}

Wrapper set the property text-align: justify which will distribute the elements evenly. But it will not work if you do not prescribe the :after pseudo-element to the wrapper, which will create a substrate for our elements and will help them to align in width.

As a result, we get it like this. There is of course a small problem in that an empty space appears below, but this problem can always be solved through margin




Connect

If you have any questions, want to get individual advice or you have an interesting offer, you can contact via the feedback form.

Or write to the email info@bobreod.ru





By submitting the form, you agree to our privacy policy