写移动端时,需要考虑每个手机的宽度,大小.
需要让两列内容之间保持一定的宽度不影响美观,此时就不能简单的给一个盒子固定的宽度
- 解决办法就是将每一个盒子的宽度设置为50%(其他数值百分比也可),给两个盒子之间设置一个固定的距离,此时不论怎么放大或者缩小都不会影响中间的距离
- 假若中间有图片的话,就需要将图片设置为 100%的大小,这样不会影响页面缩放时的图片页面效果.
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<head>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: #e8e8e8;
}
.box{
border: 1px solid red;
display: flex;
}
.box .left,.right{
border: 1px solid green;
width: 50%;
}
.box .left{
margin-right: 20px;
}
.box img{
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
<img src="https://static.maizuo.com/v5/upload/6f5e10201aaea65b311d7ab562ba097c.jpg?x-oss-process=image/quality,Q_70" alt="">
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
</div>
<div class="right">
<p>ppppppppppppp</p>
</div>
</div>
</body>
</html>
