第17题 CSS如何进行品字布局?
第一种(非全屏版)
HTML 代码:
<div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div>
CSS 代码:
body { overflow: hidden; } div { margin: auto 0; width: 100px; height: 100px; background: red; font-size: 40px; line-height: 100px; color: #fff; text-align: center; } .div1 { margin: 100px auto 0; } .div2 { margin-left: 50%; background: green; float: left; transform: translateX(-100%); } .div3 { background: blue; float: left; transform: translateX(-100%); }
效果图如下:
第二种(全屏版)
HTML 代码不变我们看一下 CSS 代码:
div { width: 100%; height: 100px; background: red; font-size: 40px; line-height: 100px; color: #fff; text-align: center; } .div1 { margin: 0 auto 0; } .div2 { background: green; float: left; width: 50%; } .div3 { background: blue; float: left; width: 50%; }
效果图如下:
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 第17题 CSS如何进行品字布局?
码云笔记 » 第17题 CSS如何进行品字布局?