请问老师为什么.left 和.right没办法居中的呢

请问老师为什么.left 和.right没办法居中的呢

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

<title>CSS布局</title>

<style type="text/css">

/*此处写代码*/

*{margin:0;padding:0;}

.one{width:100%;}

.main{

    width:1000px;

    margin:0 auto;

}


.left,.right{

    float:left;

    width:300px;

    padding:10px;

   

    

    

}

.left img,.right img{

    width:300px;

    height:200px;

}

.con{

    width:300px;

}

</style>

</head>

<body>

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

<div class="one">

<div class="main">

   <div>

       <p>ENJOY THE LIFE</p>

   </div>

   <div>

       <div class="left">

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

           <div class="con">

           文字文字文字文字文字文字文字文字文字文字文字文字

               </div>

       </div>

       <div class="right">

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

           <div class="con">

           文字文字文字文字文字文字文字文字文字文字文字文

               </div>

       </div>

   </div>

</div>

</div>

</body>

</html>


正在回答

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

4回答

你好,这里这样设置文字也是居中的,是由于整体的宽度太宽了.left的有50%呢,如下图,建议:把整体宽度修改为640px。

http://img1.sycdn.imooc.com/climg//59a612000001590e06040309.jpg

祝学习愉快~

  • 慕工程1453923 提问者 #1
    谢谢老师啊~~~谢谢
    2017-08-30 10:03:10
好帮手慕糖 2017-08-29 18:32:03

你好,在你给的代码中没有设置50%呀,你看下你是怎么设置的,是否还有内外边距,这些都会影响的。若还是不行的话,可以把你修改的代码粘贴过来。祝学习愉快~

  • 提问者 慕工程1453923 #1
    嗯嗯,谢谢老师,的确是因为设置了padding-left使整体宽度超过了1000px。还有一个问题是怎么使.con的文字与文字的宽度保持一致呢?设置了.con宽度为300px之后就不能居中了? <style type="text/css"> /*此处写代码*/ *{margin:0;padding:0;} /*.one{width:100%;}*/ .main{ width:1000px; margin:0 auto; } .tit{ text-align:center; margin-bottom:50px; } .left,.right{ float:left; /* border:1px solid;*/ width:50%; text-align:center; /*padding:10px;*/ } .left img,.right img{ width:300px; height:200px; } /*.con{ width:300px; }*/ </style>
    2017-08-29 20:18:07
提问者 慕工程1453923 2017-08-29 16:53:12
好帮手慕糖 2017-08-29 10:40:27

你好,这里是由于.main设置的宽度过大,.main的宽度应等于两个小盒子的宽度之和。一个小盒子的为:300+10*2 = 320px;那么.main的框设置为640px即可。

祝学习愉快~

  • 提问者 慕工程1453923 #1
    那为什么2-5课程中的3个图标设置了33.3%,父元素设置1000px,就能平均分配到一列,而2副图片设置为50%就不行的呢,如图看我的回复那里
    2017-08-29 16:52:24
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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