老师 图片大小怎么不好调节
来源:2-7 编程练习
anan_123
2019-08-14 18:27:09
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> *{ margin: 0; border: 0; } .top { width: 1000px; height: 50px; text-align: center; line-height: 50px; font-size: 24px; margin: 0 auto;
} .box{ width: 1000px; height: 400px; margin: 0 auto; overflow: hidden; } .img{ width: 480px;
} .box1{ width: 500px; float: left; } .box2{ width: 500px; float: left; } </style></head>
<body> <div class="top"> <strong>ENJOY THE LIFE</strong> </div> <div class="box"> <div class="box1"> <img src="http://climg.mukewang.com/58f829090001a4b504260240.jpg" alt=""><br> Life is a book,just read more and more refined,more <br>write morecarefully.When read,mind open,all things <br>have been indifferent to heart.Life<br> is the precipitation. </div> <div class="box2"> <img src="http://climg.mukewang.com/58f8290f0001558804260240.jpg" alt=""><br> Life is a book,just read more and more refined,more<br> write more carefully.When read,mind open,all <br>things have been indifferent to heart.<br>Life is the precipitation. </div> </div></body>
</html>
2回答
同学你好, 打开控制台, 鼠标移入对应的标签就可以看到对应的图片大小哦, 示例:
如果帮助到了你, 欢迎采纳!
祝学习愉快~~~
好帮手慕慕子
2019-08-14
同学你好, 如下图所示,图片大小可以通过控制台查看图片自身的大小,然后在进行设置即可哦
如下图所示,因为是设置大盒子整体水平居中显示, 但是左侧距离大盒子没有间距,右侧距离大盒子有一定的间距,导致整体水平居中实现的有误差哦,
老师这里给同学提供一个参考思路
可以设置左右两侧的盒子宽度刚好等于图片的宽度, 然后左侧内容左浮动,右侧内容右浮动,这种剩余的空间就是两个盒子之间的空白间隔距离了
如果帮助到了你, 欢迎采纳!
祝学习愉快~~~
相似问题