2-7编程练习的问题?

2-7编程练习的问题?

这是我的效果

http://img1.sycdn.imooc.com//climg/5a17c687000141c612260436.jpg这是我的代码:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

<title>CSS布局</title>

<style type="text/css">

*{margin:0;padding:0;}

.container{border:1px solid gray;width:80%;margin:0 auto;}

    .clr{clear:both;}

.container > p{text-align:center;padding:10px;}

.lside{width:40%;float:left;text-align:center;margin-right:20px;}

.rside{width:40%;float:right;text-align:center;}

/*此处写代码*/

</style>

</head>

<body>

    <div class="container">

        <p>ENJOY THE LIFE</p>

        <div class="lside">

            <img src="http://img1.sycdn.imooc.com/climg//58f829090001a4b504260240.jpg" alt="">

            <p>Life is like a box of chocolates:you never know what you’re gonna get.Life is like a box of chocolates:you never know what you’re gonna get.</p>

        </div>

        <div class="rside">

            <img src="http://img1.sycdn.imooc.com/climg//58f8290f0001558804260240.jpg" alt="">

            <p>Life is like a box of chocolates:you never know what you’re gonna get.Life is like a box of chocolates:you never know what you’re gonna get.</p>

        </div>

        <div class="clr"></div>

    </div>

<!-- 此处写代码 -->

</body>

</html>

发现无法让两个图片离的更近,是因为float的影响吗?虽然设置了margin值依然无效;求问这个该怎么解决?

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

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

2回答
小丸子爱吃菜 2017-11-24 16:14:51

也可以各自左右浮动,通过设置相应的margin-left值和margin-right值去调整他们的位置,就得这么去调整去写!

祝学习愉快!

  • 提问者 夜幕客船 #1
    我上面贴的代码就是分别左浮和右浮,然后再设置lside 的margin right 20 px ,但是没作用了???那就是左右浮动不影响设置margin 值???
    2017-11-24 16:36:48
  • 小丸子爱吃菜 回复 提问者 夜幕客船 #2
    左侧的设置margin-left:50px;右侧的设置margin-right:50px; 设置大一些就有效果了。
    2017-11-24 17:08:23
提问者 夜幕客船 2017-11-24 15:46:02

我又仔细检查了一下,发现是因为设置lsdie左浮动,rside右浮动的缘故,解决办法是可以将float全部设置为left;之后在调整margin,但总感觉我这样操作好像太繁琐了~~

问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

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