Khi bạn có 1 block chứa 1 số block con giống nhau.
Ví dụ như block to chứa 3 ảnh con trên. Vậy làm cách nào để giãn cách đều 3 ảnh này khi responsive.
Mới đây, mình đã sử dụng 1 cách đã lấy được trên mạng.
Để div cha thuộc tính:
text-align: justify;
Với các div con, để thuộc tính:
display: inline-block;
width: 300 px;(giá trị fix)
Khi đó div sẽ giãn cách theo đúng khoảng cách. Tuy nhiên khi có nhiều hàng thì hàng cuối cùng sẽ bị lỗi vì thuộc tính justify không áp dụng cho dòng cuối cùng. Do đó ta thêm div:after cho block cha.
div(cha):after{
- display: table;
- content: “”;
- line-height: 0;
}
Bên cạnh đó nếu giả sử phân 3 block con, nhưng số dòng block con dòng cuối cùng là 2 thì 2 block này sẽ có 1 cái bên trái, 1 cái bên phải.
Khi đó ta sẽ cần 1 div ảo có width, height bằng block con thật ở cuối cùng, có opacity: 0. Div này có tác dụng giúp vị trí hiện thị dòng cuối cùng trở nên đẹp hơn.
