人物介绍的排版【小白进】

人物介绍的排版【小白进】

很多时候我们要写这样的
图片+文字 的布局

那这样的布局是怎么实现的呢
其实很简单`

HTML代码

<!--外层的盒子-->
<div class="div2">
				<!--这里是人物的照片-->
            <div class="img">
                <img src="./img/libai.jpg" alt="">
            </div>
            <!--这里就是文本了-->
            <p>李白 <img src="./img/speaker.png" alt=""> </p>
            <p>李白（701年－762年） ，字太白，号青莲居士，又号“谪仙人”，
                唐代伟大的浪漫主义诗人，被后人誉为“诗仙”，与杜甫并称为“李杜”，
                为了与另两位诗人李商隐与杜牧即“小李杜”区别，杜甫与李白又合称“大李杜”。
                据《新唐书》记载，李白为兴圣皇帝（凉武昭王李暠）九世孙，与李唐诸王同宗。
                其人爽朗大方，爱饮酒作诗，喜交友。李白深受黄老列庄思想影响，有《李太白集》传世
                ，诗作中多以醉时写的，代表作有《望庐山瀑布》《行路难》《蜀道难》《将进酒》《明堂赋》
                《早发白帝城》等多首。
                <a href="#"><span>>>1178篇诗文</span></a>
            </p>
</div>            

再来看它的css

.div2 {
  width: 100%;
  position: relative;
  height: 450px;
  background-color: #F0EFE2;
}
.div2 .img {
  float: left;
  padding: 20px;
}
.div2 p {
  font-size: 20px;
  line-height: 2em;
}

其实这里小编想多了 其实只用 img标签+文本就可以实现
就像这样

<div style="margin: auto;width: 400px; padding: 10px; 
line-height: 30px; font-size: 20px; background-color: #F0EFE2;">
    <img style="float: left;" src="./img/libai.jpg" alt="">
    <p>李白</p>
    李白（701年－762年） ，字太白，号青莲居士，又号“谪仙人”，
                唐代伟大的浪漫主义诗人，被后人誉为“诗仙”，与杜甫并称为“李杜”，
                为了与另两位诗人李商隐与杜牧即“小李杜”区别，杜甫与李白又合称“大李杜”。
                据《新唐书》记载，李白为兴圣皇帝（凉武昭王李暠）九世孙，与李唐诸王同宗。
                其人爽朗大方，爱饮酒作诗，喜交友。李白深受黄老列庄思想影响，有《李太白集》传世
                ，诗作中多以醉时写的，代表作有《望庐山瀑布》《行路难》《蜀道难》《将进酒》《明堂赋》
                《早发白帝城》等多首。
</div>

就这样就完成了一个简单的 人物介绍布局
其实最主要的就是给照片加上一个浮动属性

float: left;

有它就可以了 好了我其实也是为了划水
不懂得欢迎留言一起探讨哦
拜拜