内联块div的水平对齐

Question

I have a series of divs inline-block displayed (and with left-right margin of 5%), as you know, once the limit of the first row of divs is reached, the rest of the divs automatically go to a second row and so on (you know, instead of overflowing the parent). However this behavior has a small detail, the elements from the second row are not horizontally aligned with the ones from the first row. I know this is caused because of the margins, still i've got no idea on how to make all elements equidistant. The following code represents the architecture of the section.

 .parent_div { width: 75%; float: right; /* The "parent of the parent" has its clearfix class*/ } .child_div { margin-left: 5%; margin-right: 5%; display: inline-block; } h4 { display: inline-block; } p { display: inline-block; } } 

 <div class="parent_div"> <div class="child_div"> <h4>Some text: </h4> <p>some info.</p> </div> <div class="child_div"> <h4>Some text: </h4> <p>some info.</p> </div> <div class="child_div"> <h4>Some text: </h4> <p>some info.</p> </div> <div class="child_div"> <h4>Some text: </h4> <p>some info.</p> </div> <div class="child_div"> <h4>Some text: </h4> <p>some info.</p> </div> </div> 

You can see here again the structure of the divs, and also you can observe that the divs from below are not aligned with the ones from above.

https://imgur.com/a/GLgFSsV

Answer 1

It is also because of the margin, but mostly because of the different length of the content in each div. The best way I could think of achieving what you want is by using grid.

 .parent_div { width: 75%; float: right; display: grid; grid-gap: 2%; grid-template-columns: repeat(auto-fill, minmax(300px, max-content)); } .parent_div .child_div h4 { display: inline-block; } .parent_div .child_div p { display: inline-block; } 

 <div class="parent_div"> <div class="child_div"> <h4>Some text111: </h4> <p>some info 3234r32.</p> </div> <div class="child_div"> <h4>Some text22: </h4> <p>some info 34.</p> </div> <div class="child_div"> <h4>Some text 232434: </h4> <p>some infods 33.asr23</p> </div> <div class="child_div"> <h4>Some text 3243: </h4> <p>some infodsf s34.</p> </div> <div class="child_div"> <h4>Some text33: </h4> <p>some infodfc fdsf342.</p> </div> <div class="child_div"> <h4>Some text22: </h4> <p>some info 34.</p> </div> <div class="child_div"> <h4>Some text 3243 234234: </h4> <p>some infodsf s34.sd</p> </div> <div class="child_div"> <h4>Some text33: </h4> <p>some infodfc fdsf342.</p> </div> <div class="child_div"> <h4>Some text22: </h4> <p>some info 34.</p> </div> </div> 

Answer 2

A simple way to amend this would be to set a min-width, so that the columns are at least x% wide - in the snippet, the divs show two at a time on rows which are 75% of the total width, and each child is minimum 35% wide. This way the children are correctly aligned and are of same width.

 .parent_div { width: 75%; float:right; /* The "parent of the parent" has its clearfix class*/ } .child_div { margin: 0 5%; display: inline-block; min-width:35%; } h4, p { display: inline-block; } 

 <div class="parent_div"> <div class="child_div"> <h4>Some text: How on earth? </h4> <p>Dunno... seriously</p> </div> <div class="child_div"> <h4>Some text: Where?</h4> <p>There on the stair</p> </div> <div class="child_div"> <h4>Some text: my name </h4> <p>Rachel.</p> </div> <div class="child_div"> <h4>Some text:Hi there </h4> <p>Nice day</p> </div> <div class="child_div"> <h4>Some text: hello </h4> <p>it's August</p> </div> </div>