第一种 两栏式布局
1 <body> 2 <!-- 两栏式布局 --> 3 <!-- 想要的效果是左边图片右边文字 拉伸盒子文字的高度宽度自动改变 --> 4 <div class="box"> 5 <div class="left"> 6 <img src="./img/头像.png" alt=""> 7 </div> 8 <div class="right"> 9 测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字 10 测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字 11 测试文字测试文字测试文字测试文字测试文字测试文字测测试文字测试文字测试文字测试文字测试文 12 字测试文字测试文字测试文字测试文字测试文字 13 14 </div> 15 </div> 16 </body>
1 <style> 2 .box { 3 width: 500px; 4 background-color: #eee; 5 overflow: auto; 6 /* 下方这个属性可以配合overflow让用户控制div的宽度的大小 */ 7 /* none 用户无法调整元素的尺寸 */ 8 /* both 用户可调整元素的高度和宽度 */ 9 /* vertical 用户可调整元素的高度 */ 10 resize: horizontal; 11 } 12 13 .left { 14 width: 200px; 15 height: 200px; 16 float: left; 17 } 18 19 .left img { 20 width: 200px; 21 height: 200px; 22 } 23 24 .right { 25 margin-left: 210px; 26 /* 不要加这个不然文字会下来 */ 27 /* float: left; */ 28 } 29 </style>
2、移动端布局
1 <body> 2 <div class="container"> 3 <!-- 头部内容 --> 4 <header></header> 5 <!-- 主题内容 --> 6 <main> 7 <!-- 主题内容中的导航条 --> 8 <div class="title"></div> 9 <!-- 主题内容中的重复样式区域 --> 10 <div class="list"> 11 <div class="one"></div> 12 <div class="one"></div> 13 <div class="one"></div> 14 <div class="one"></div> 15 <div class="one"></div> 16 <div class="one"></div> 17 <div class="one"></div> 18 <div class="one"></div> 19 <div class="one"></div> 20 <div class="one"></div> 21 <div class="one"></div> 22 <div class="one"></div> 23 <div class="one"></div> 24 </div> 25 <div class="box"></div> 26 <div class="box"></div> 27 <div class="box"></div> 28 <div class="box"></div> 29 <div class="box"></div> 30 </main> 31 <!-- 尾部 --> 32 <footer></footer> 33 </div> 34 </body>
1 * { 2 margin: 0; 3 padding: 0; 4 } 5 /* 设置宽高充满整个手机屏幕 */ 6 html, 7 body { 8 width: 100%; 9 height: 100%; 10 } 11 /* 设置最外层大盒子宽高 然后开弹性盒 设置弹性盒内容的排列顺序 为竖向 */ 12 .container { 13 width: 100%; 14 height: 100%; 15 display: flex; 16 flex-direction: column; 17 } 18 /* 头部设置成宽百分百 高度为定高 */ 19 header { 20 width: 100%; 21 height: 1.33333rem; 22 background: red; 23 } 24 /* 主体部分设置成flex ：1 宽百分百 加上overflow: auto;让其主体部分的内容可以滚动 而头部尾部固定不变 */ 25 main { 26 width: 100%; 27 flex: 1; 28 overflow: auto; 29 } 30 31 main .title { 32 width: 100%; 33 height: 1.2rem; 34 background: blue; 35 } 36 /* 给主体部分的列表也就是重复性区域加上overflow: auto;可以让其滚动 而主体的标题部分不滚动 */ 37 main .list { 38 width: 100%; 39 height: 100%; 40 background: #ccc; 41 overflow: auto; 42 } 43 44 main .list .one { 45 width: 100%; 46 height: 2.13333rem; 47 margin-top: 0.53333rem; 48 background: pink; 49 } 50 51 main .box { 52 width: 100%; 53 height: 2.13333rem; 54 background: maroon; 55 } 56 /* 尾部也要设置成定高 */ 57 footer { 58 width: 100%; 59 height: 1.12rem; 60 background: green; 61 }