(1)box-sizing: border-box;实现:
<!DOCTYPE html>
<html>
<head>
<title>border-box 实现三个div等分排在一行</title>
<style>
*{
padding:0;
margin:0;
}
.container
{
width: 800px;
background:#ccc;
margin: 100px auto;
}
.item
{
box-sizing: border-box; /*border计算在width中*/
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width: 33.33%;
height: 300px;
border:1px solid black;
float:left;
}
.container:after{
display: block;
clear: both;
content: ".";
height: 0;
visibility: hidden;
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="item">这是第一个div</div>
<div class="item">这是第二个div</div>
<div class="item">这是第三个div</div>
</div>
</body>
</html>
如果不设置box-sizing只设置width:33.33%,很容易出错,因为margin,border和padding不计算在盒子的width中,所以33.33%达不到效果,可能会因为margin和padding 整体的宽度超过了100%,所以需要设置box-sizing: border-box;
(2)flex 实现:
<!DOCTYPE html>
<html>
<head>
<title>border-box 实现三个div等分排在一行</title>
<style>
*{
padding:0;
margin:0;
}
.container
{
width: 800px;
background:#ccc;
margin: 100px auto;
display: flex;
display: -webkit-flex; /* Safari */
}
.item
{
flex:1;
height: 300px;
border:1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="item">这是第一个div</div>
<div class="item">这是第二个div</div>
<div class="item">这是第三个div</div>
</div>
</body>
</html>