The effect demo in the picture, if you want to see the three-column layout of equal heights, you can take a look at the blog I wrote: http://blog.csdn.net/zp1996323/article/details/49558015
As above, the width of the four li's is exactly the width of the ul. The left and right padding between the li's: 10px, plus the outer ul padding: 10px; The top, bottom, left, and right distances of each li are 20, and the effect is as follows.
The same is true for 3-column layout. The combined width of 3 li is equal to the width of ul, li{ padding:20}, then ul should also add padding: 20, and you get this layout
There are several points to note in order to achieve this:
The father container .list-container must have the same padding as the son
Dad and son’s box-sizing: border-box; remember to set
Img images should be equal in height and width to fit. In this example, I set the width to 100% to ensure that it will not exceed the outside. The height will be automatic.
Remember to clear the li after it floats. (The clear:both part of list-container.)
There are many frameworks for doing similar things without any worries. For example bootstrap
ps: If the height and width of your picture are uncontrollable. But if you want to display the same height, you can use a transparent image with controllable height and width as img src and then set the real push content as the background for img. Remember to set the background-size of the background to cover. (This will crop your image) or contain (if you set this, you need to give a background-color to prevent the image from entering the visual margin.), and then add background-repeat: no-repeat; background- position: center;
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
html
css
If you use flex, it should be easy to implement.
https://jsfiddle.net/scroller/bwsc7aac/
1. Float
float:left;
width:33.333333%;
2. Flex
is used less and the compatibility is not clear. Please refer to:
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source= tuicool
The effect demo in the picture, if you want to see the three-column layout of equal heights, you can take a look at the blog I wrote: http://blog.csdn.net/zp1996323/article/details/49558015
bootstrap
You can take a look at the grid system of bootstrap
. . . So helpless, each li has width: 30%, margin-right: 2.5%,
ul: padding-left: 2.5%
As above, the width of the four li's is exactly the width of the ul. The left and right padding between the li's: 10px, plus the outer ul padding: 10px;
The top, bottom, left, and right distances of each li are 20, and the effect is as follows.
The same is true for 3-column layout. The combined width of 3 li is equal to the width of ul, li{ padding:20}, then ul should also add padding: 20, and you get this layout
Set the width of each 3 li and the width of the middle and both sides of the li between a line to add up to 100% of the entire screen width
First post an example that can be satisfied in modern browsers
There are several points to note in order to achieve this:
The father container .list-container must have the same padding as the son
Dad and son’s box-sizing: border-box; remember to set
Img images should be equal in height and width to fit. In this example, I set the width to 100% to ensure that it will not exceed the outside. The height will be automatic.
Remember to clear the li after it floats. (The clear:both part of list-container.)
There are many frameworks for doing similar things without any worries. For example bootstrap
ps: If the height and width of your picture are uncontrollable. But if you want to display the same height, you can use a transparent image with controllable height and width as img src and then set the real push content as the background for img. Remember to set the background-size of the background to cover. (This will crop your image) or contain (if you set this, you need to give a background-color to prevent the image from entering the visual margin.), and then add background-repeat: no-repeat; background- position: center;