请问,如何使下方文字,的左边和图片的左边对齐,另外还有哪些需要更正的呀,谢谢。

请问,如何使下方文字,的左边和图片的左边对齐,另外还有哪些需要更正的呀,谢谢。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css布局</title>
<style>
*{padding:0px;margin:0px;}
.top{text-align: center;font-size: 40px;margin:20px 0 15px 0;}
.container{width:950px;margin:0 auto;overflow: hidden;text-align: center;}
.left{float:left;}
.right{float:left;}
.container img{padding:10px;}
.p{text-align: left;}
</style>
</head>
<body>
<div class="top">
ENJOY THE LIFE
</div>
<div class="container">
<div class="left">
<img src="http://img1.sycdn.imooc.com/climg//58f829090001a4b504260240.jpg">
<div class="p">Life is like a book,just read more and more<br>refined, more write more carefully. When read,<br>mind open, all things have been indifferent to<br>heart. Life is the precipitation.</div>
</div>
<div class="right">
<img src="http://img1.sycdn.imooc.com/climg//58f8290f0001558804260240.jpg">
<div class="p">Life is like a book,just read more and more<br>refined, more write more carefully. When read,<br>mind open, all things have been indifferent to<br>heart. Life is the precipitation.</div>
</div>
</div>
</body>
</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕夭夭 2019-03-06 10:17:55

你好同学 , 这里对齐方式没有上下对齐 . 并且效果实现左对齐即可,同学可以观察一下效果图 ,因为一行的最末端如果单词比较长 ,就会换行显示 . 因为文字自身的特点  ,所以这里不需要实现右对齐的

http://img1.sycdn.imooc.com//climg/5c7f2c0100017d2202640224.jpg

如果想要显示的尽量好看一些, 可以去文字里面所有的<br> ,然后自己给文字设置一个宽度 ,把居中和右对齐去掉 , 如下

http://img1.sycdn.imooc.com//climg/5c7f2d460001d82004180173.jpg

http://img1.sycdn.imooc.com//climg/5c7f2d690001ad1703690152.jpg

希望对你有帮助 , 祝学习愉快 ,望采纳 .

好帮手慕夭夭 2019-03-05 11:17:31

你好同学 ,文字与上面图片对不齐是因为图片设置了一个填充 ,如下

http://img1.sycdn.imooc.com//climg/5c7dea240001431e04910424.jpg

所以可以给文字也设置一个padding即可 :

http://img1.sycdn.imooc.com//climg/5c7dea4200014f1303830134.jpg

祝学习愉快 ,望采纳 .

  • 提问者 藤六 #1
    如果去掉padding值的话,图片就靠在一起了。怎么样使他们有间距的情况下使图片和文字上下左右对齐?
    2019-03-06 09:44:15
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师