如何用css将盒子完美的等分
Posted 前端知识汇总
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用css将盒子完美的等分相关的知识，希望对你有一定的参考价值。
假期结束了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>三等分测试</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
section {
width: 80%;
height: 150px;
background-color: pink;
border: 1px solid #0000FF;
}
section div {
width: 33.33%;
height: 100%;
float: left;
}
div:nth-child(1) {
background-color: #FFC0CB;
}
div:nth-child(2) {
background-color: skyblue;
}
div:nth-child(3) {
background-color: chocolate;
}
</style>
</head>
<body>
<section>
<div>第一个盒子</div>
<div>第二个盒子</div>
<div>第三个盒子</div>
</section>
</body>
</html>
<!DOCTYPE html><html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>三等分测试</title><style type="text/css">* {padding: 0;margin: 0;}section {width: 80%;height: 150px;background-color: pink;border: 1px solid #0000FF;display: flex; /* 第一步先改变显示模式*/min-width: 300px;/* 设置缩放的最小宽度 */max-width: 1000px;/* 设置缩放的最大宽度 */flex-direction: row;/* 以水平方式缩放 */flex-direction: column; /* 以垂直方式缩放*/}section div {width: 33.33%;height: 100%;float: left;flex: 1;/* 第二步，设定每个框所占的份数 */}div:nth-child(1) {flex: 2;/*占显示的两份*/background-color: #FFC0CB;}div:nth-child(2) {flex: 3;/*占显示的三分*/
background-color: skyblue;}div:nth-child(3) {width: 200px;/* 这样设置了之后这个盒子就不会缩放了 */background-color: chocolate;}</style></head><body><section><div>第一个盒子</div><div>第二个盒子</div><div>第三个盒子</div></section></body></html>
这两种写法的效果稍微有点区别，第二种方式现在经常用到
-
一定要先在父级盒子里面改变显示的方式为flex -
flex的值后面是数字，没有单位的 -
flex是写在子元素中的，不能给加到父级中 -
一旦有盒子手动的添加width之后此盒子将不会再被缩放 -
flex-direction可以改变缩放是水平的还是垂直的
以上是关于如何用css将盒子完美的等分的主要内容，如果未能解决你的问题，请参考以下文章