圣杯布局中的问题

Question

圣杯布局中的问题

ZrdZz

25633562

发布于
2016-12-21

Dont

7k153552

更新于
2016-12-21

我必须在main中加上box-sizing:border-box,left和right才能到正确的位置，不加的话为什么会变成图中的那样？

<style type="text/css">
        *{
            margin:0;
            padding: 0;
        }
        #wrapper{
            width: 1000px;
            margin: 0 auto;
            border: 1px solid;
            overflow: hidden;
            
        }
        #main{
            width: 100%;
            float: left;
            padding: 20px;
            box-sizing: border-box;
            
        }
        #left{
            width: 200px;
            float: left;            
            margin-left: -100%;
        }
        #right{
            width: 120px;
            float: left;            
            margin-left: -120px;
        }
        img{
            width: 80px;
            height: 80px;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="main">
            <p>《文明6》是由Firaxis Games开发，2K Games负责发行的策略类游戏，该游戏是游戏设计师席德·梅尔创作的《文明》系列的第6部，</p>
            <p>游戏中玩家建立起一个帝国，并接受时间的考验。玩家将创建及带领自己的文明从石器时代迈向信息时代，并成为世界的领导。</p>
        </div>
        <div id="left">
            <img src="../tupian/task_1_01.jpg">
            <p>哈哈哈哈哈</p>
        </div>
        <div id="right">
            <img src="../tupian/task_1_01.jpg">
            <img src="../tupian/task_1_01.jpg">
            <img src="../tupian/task_1_01.jpg">
            <img src="../tupian/task_1_01.jpg">
        </div>
    </div>

图片描述