<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        .wrapper {
    width: 100%;    /* 也可以固定宽度 */
    height: 200px;

}
.wrapper > div {
    display: inline-block;    /* 如需支持IE8以下版本,用浮动来做 */
    width: calc(100% / 3.09);    /* 此处运用了一个css3的表达式,将div三等分,IE8及以上可以支持,当然也可以根据需要设置固定值 */
    width: -webkit-calc(100% /3.09); /*3.09 排除margin的宽度*/
    width: -moz-calc(100% / 3.09);
    height: 100%;
}
    </style>
</head>
<body>
    <div class="wrapper">
        <div style="background-color:red"></div>

        <div style="background-color:green"></div>

        <div style="background-color:blue"></div>
    </div>
</body>
</html>

 

相关文章:

  • 2021-10-16
  • 2021-09-26
  • 2021-10-26
  • 2022-12-23
猜你喜欢
  • 2021-06-23
  • 2021-05-10
  • 2021-08-07
  • 2021-09-04
  • 2021-09-25
  • 2021-11-07
相关资源
相似解决方案