请按照要求完成模块的结构和样式: 左图右文, 间距10px,

[问答题]

请按照要求完成模块的结构和样式: 左图右文, 间距10px, 左图宽100px高100px, 右文宽200px, 行高20px, 高度超出100px部分截断

推荐

林呼

结构:

<img />

<p>xxxxxxxxxxxxxxxxxx</p>

</div>

(写出有包裹的结构, 5分)

(体现语义标签(p, img), 5分)

样式

.block img {

float: left;

width: 100px

height: 100px;

margin-right: 10px;

}

(出现float: left, 10分)

(备注: 左右布局有多种方式实现,

出现display: flex给8分,

出现display: inline-block给5分)

.block p{

width: 200px

height: 100px;

line-height: 20px;

overflow: hidden;

}

(体现line-height, 5分)

(体现overflow, 5分)

发表于 2018-07-25 20:32:02 回复(1)

LvYuZhen

发表于 2018-11-30 22:37:52 回复(0)

abbyla

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> img{ float: left; width: 100px; height: 100px; } p{ width: 200px; height: 100px; overflow: hidden; line-height: 20px; } </style> </head> <body> <div> <img src="img/heart.gif" /> <p>啦啦啦啦啦啦啦啦啦啦绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿</p> </div> </body> </html>

编辑于 2018-10-22 14:07:18 回复(0)

倩倩兮

<div class='block'> <img src='' /> <p></p> </div> img{ width:100px height:100px float:left margin-left：10px } p{ width:200px height:100px line-height:2px overflow:hidden }

编辑于 2018-10-18 23:51:39 回复(0)