CSS教程 等分的两种方法

CSS教程 等分的两种方法
一、通过增加一个边框进行设置:可以匹配低版本css
二、通过calc()进行函数运算:
一、通过增加一个边框进行设置:可以匹配低版本css
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .mydiv { width: 90%; height: 400px; border: 1px solid #ccc; margin: 0 auto; overflow: hidden; } .wrapper { margin-right: -10px; /* background-color: rgba(0,0,0,0.5); */ height: 100%; } .wrapper>.item { width: 25%; height: 100%; float: left; } .wrapper::after { content: ""; display: block; clear: both; width: 0; } .wrapper>.item>div { margin-right: 10px; background-color: pink; height: 100%; } </style> </head> <body> <div class="mydiv"> <div class="wrapper"> <div class="item"> <div></div> </div> <div class="item"> <div></div> </div> <div class="item"> <div></div> </div> <div class="item"> <div></div> </div> </div> </div> </body> </html>
二、通过calc()进行函数运算:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .mydiv { width: 90%; height: 400px; border: 1px solid #ccc; margin: 0 auto; } .item { float: left; height: 100%; width: calc((100% - 30px) / 4); background-color: pink; margin-right: 10px; } .item:last-child { margin-right: 0; } </style> </head> <body> <div class="mydiv"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </body> </html>
作者:域名博客,网站地址:https://liuguangfa.com/,转载注明出处!