盒子布局进阶

来源：互联网发布：宜昌正宗火锅知乎编辑：程序博客网时间：2024/06/03 21:00
<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        section{            width: 666px;        }        article{            box-sizing: border-box;            width: 333px;            height: 333px;            padding: 20px;            text-align: center;            float: left;            border-bottom: 1px solid grey;            border-left: 1px solid grey;        }        article:nth-child(even){            border-right: 1px solid grey;        }        article:nth-child(1){            border-top: 1px solid grey;        }        article:nth-child(2){            border-top: 1px solid grey;            height: 666px;        }        article:nth-child(3){            /*border-right: 1px solid grey;*/            margin-top: -333px;        }    </style></head><body>    <section>        <article>            <h1>招财树</h1>            <p>招财进宝，日入斗金</p>            <img src="img/test.jpg"width="100px" alt="aa">        </article>        <article>            <h1>招财树</h1>            <p>招财进宝，日入斗金</p>            <img src="img/test.jpg"width="100px" alt="aa">        </article>        <article>            <h1>招财树</h1>            <p>招财进宝，日入斗金</p>            <img src="img/test.jpg"width="100px" alt="aa">        </article>        <!--<article>-->            <!--<h1>招财树</h1>-->            <!--<p>招财进宝，日入斗金</p>-->            <!--<img src="img/test.jpg"width="100px" alt="aa">-->        <!--</article>-->    </section></body></html>
阅读全文
0 0