前言:总结前辈的经验,尝试一种的新的布局方式,用定位后可省去多余的层级嵌套标签,方便实用
对定位要点要熟悉
css
*{box-sizing: border-box;margin: 0;
padding: 0;}
.box{
position: relative;
border: 1px solid #ddd;
height: 82px;
padding-left: 108px;
}
img{position: absolute;left: 10px;top: 10px;}
html
<div class="box">
<img src="2.png" alt="" />
<div>
<p>这是一段文本</p>
<p>这是一段文本</p>
<p>这是一段文本</p>
</div>
</div>
原理:1).box内容大盒子padding-left把左边的img的区域留出来。
2)把img定位到 1)预留的位置。