整个容器的宽度要怎么设置?

整个容器的宽度要怎么设置?

<!DOCTYPE html>

<html>

<head>

        <!-- 此处编写样式 -->

        <style>

        html,body{

            margin:0;

            padding:0;

        }

        .container{

            margin:auto;

            border-style:dashed;

            width:840px;

        }

        .row1{

            overflow:hidden;

            margin:20px 20px 20px 20px;

        }

        .row1 .cloumn1,.cloumn2,.cloumn3{

            width:240px;

            border:solid;

            float:left;

            margin-right:20px;

        }

        .row2{

            margin:0 20px 20px 20px;

            overflow:hidden;

        }

        .row2 .cloumn1,.cloumn2,.cloumn3{

            width:240px;

            border:solid;

            float:left;

            margin-right:20px;

        }

        </style>

</head>

<body>   

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

        <div class="container">

        <div class="row1">

        <div class="cloumn1">

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

            <div>欢迎来到慕课网学习新知识!</div>

            </div>

        <div class="cloumn2">

            <img src=http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg>

            <div>欢迎来到慕课网学习新知识!</div>

        </div>

        <div class="cloumn3">

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

            <div>欢迎来到慕课网学习新知识!</div>

        </div>

        </div>

        

        <div class="row2">

        <div class="cloumn1">

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

            <div>欢迎来到慕课网学习新知识!</div>

        </div>

        <div class="cloumn2">

            <img src=http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg>

            <div>欢迎来到慕课网学习新知识!</div>

        </div>

        <div class="cloumn3">

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

            <div>欢迎来到慕课网学习新知识!</div>

        </div>

        </div>

        </div>

</body>

</html>

问题:左边和右边图片与最大容器的间隔不相等,要怎么设置相等?

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

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

4回答
慕数据0481230 2018-08-07 17:00:54

整体思路:1个大的div容器有6个小的div,每个小的div容器里存放着一张照片和一个p标签。定义一个class 使6个div同时实现左浮动。设置大容器div 的内边距,设置小容器div的外边距。

提问者 慕圣5114414 2018-08-07 16:01:18

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

我感觉右边比左边宽诶?而且计算容器的宽度应该为800px呀,3*240px+4*20px=800px,为什么取820px?

chrismorgen 2018-08-07 09:35:10

修改之后的样式如下图,左右两边的距离都是20px,你的效果是下图这个样式么?

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

chrismorgen 2018-08-06 13:37:12

原因是你给row1,row2设置了右外边距20px,然后有给每个元素设置了右外边距20px,修订之后的代码如下图,如果我的建议解决了你的问题,请采纳,祝学习愉快~

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

  • 提问者 慕圣5114414 #1
    为什么左边还是比右边宽一些?
    2018-08-06 20:48:24
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
从网页搭建入门Java Web2018版
  • 参与学习           人
  • 提交作业       1088    份
  • 解答问题       10205    个

如果你有Java语言基础,又想以后从事Java Web开发,那么本路径是你的不二选择!本路径从网页搭建开始入手,通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变!

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

在线咨询

领取优惠

免费试听

领取大纲

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