Summary of 4 methods of div+css layout to achieve 2-end alignment of css

The div+css layout to achieve 2-end alignment is often used in our web page typesetting. This article will summarize the methods that can be achieved:

HTML structure

Use CSS to align the divs in the demo.

<div class="box">
 <div class="demo">
     <div>1</div>
     <div>2</div> 
     <div>3</div>
 </div>
</div>

1. Negative margin method

This method requires an extra layer of nesting to be implemented, using the spacing of the elements as the margin overflow value of the middle layer.

<style>
.box{
     width:300px;margin:auto;overflow:hidden;border:1px solid #ddd;
}
.box .demo{
    margin-left:-10px;width:310px
}
.box .demo div{
     width:93.333px;/*(calculation: (300-10*2)/3)*/
     float:left;
     margin-left:10px;
}
</style>

2.display:inline-block/text-align:justify method

The justify method is simpler and more convenient. As long as a simple element is declared, the elements inside will be automatically aligned and laid out with equal spacing! There is no need to calculate the margin spacing between each list element, let alone modify the width of the parent container.

Note: The elements in the demo structure must contain [line breaks] or [spaces], otherwise writing them directly will not work.

<style>
.demo{
     margin:0;padding:0;
     text-align:justify;
     text-align-last:justify;/*Solve IE support*/
     line-height:0;/*Solve the extra blank space at the bottom of the standard browser container*/
}
@media all and (-webkit-min-device-pixel-ratio:0) {
  .demo{
     font-size:0;/*webkit clears the extra space in the last element after using [line break] or [space character] in the element*/
  }
}
.demo:after{/*text-align-last:justify is only supported by IE, standard browsers need to use the .demo:after pseudo-class to simulate a similar effect*/
     display:inline-block;
     overflow:hidden;
     width:100%;
     height:0;
     content:'';
     vertical-align:top;/*Opera browser solves the extra space at the bottom*/
}
.demo div{
     width:20%;
     display:inline-block;
     text-align:center;/*Cancel the influence of upper elements*/
     text-align-last:center;
     font-size:12px;
}
</style>

3. CSS3 property space-between

This method is based on webapp development based on the webkit kernel and winphone IE10 and above, and is often used for mobile terminal layout.

<style>
.demo{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
}

.demo div{
     width:30%; 
}
</style>

4. CSS3 property column-count

The column attribute is a multi-column layout. To use column to achieve alignment at both ends, you only need to set the number of modules to be consistent with the number of columns. It is recommended for mobile terminal layout.

<style>
.demo{
     -webkit-column-count:3;-moz-column-count:3;column-count:3;
     -webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px; 
}

.demo div{
     
}
</style>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Six methods for nginx optimization

>>: Pay attention to the use of HTML tags in web page creation