css布局之三角戳布局

来源：互联网发布：云计算有什么意义编辑：程序博客网时间：2024/06/09 18:08
<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        *{            padding: 0;            margin:  0;        }        #container{            width: 100%;            overflow: hidden;        }        .one{            width: 33%;            background: darkcyan;            text-align: center;            float: left;            padding-bottom: 666px;            margin-bottom: -566px;        }        .one:first-child{            background: royalblue;        }        .one:last-child{            background: green;        }        .one img{            width: 33%;            padding: 10px;        }    </style></head><body>    <div id="container">        <div class="one">            <img src="img/test.jpg" width="100px" alt="">            <h1>主流布局</h1>            <p>                自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度                自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度                自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度                自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度                自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度                自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度                自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度                自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度            </p>        </div>        <div class="one">            <img src="img/test.jpg" width="100px" alt="">            <h1>主流布局</h1>            <p>                自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度                自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度                自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度                自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度            </p>        </div>        <div class="one">            <img src="img/test.jpg" width="100px" alt="">            <h1>主流布局</h1>            <p>                自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度                自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度                自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度                自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度自动撑开高度            </p>        </div>    </div></body></html>
用padding 和margin 相互抵消
阅读全文
0 0