设置了样式，banner-right是banner-right的一半

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

*{padding: 0;

margin: 0;}

.banner{

width: 100%;

height:400px;

background:pink;

}

.banner-left{

width: 50%;

height: 400px;

background: green;

/*background: url("http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg") no-repeat center center;*/

}

.banner-right{

width: 50%;

height: 400px;

background:red;

/*background: url("http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg") no-repeat center center;*/

}

</style>

</head>

<body>

</div>

</div>

</body>

</html>

源自：CSS网页布局基础 2-14 编程练习

收起

2回答

好帮手慕星星回答被采纳获得+3积分 2018-04-03 17:34:48

你自己的布局方式这就是这样写的呀，

banner-right在banner-left的里面，自己改成并列的就可以了。

好帮手慕星星 2018-04-03 15:51:45

banner-right是banner-right的一半这句话应该是说错了吧。这道编程题的布局方式应该分成上面和下面两部分，参考：

然后再通过margin值来进行位置调整。自己动手做一做，祝学习愉快

提问者慕用2183805 #1

我出来的top-right在 top-left盒子里，width设置了50%显示的是left的一半

2018-04-03 16:03:36
好帮手慕星星回复提问者慕用2183805 #2

最外层盒子banner设置宽度为100%，里面的banner-left设置宽度为50%，也就是banner的一半，banner-left里面的banner-right设置宽度为50%，也就是banner-left的一半，是正确的呀。

2018-04-03 16:47:32
提问者慕用2183805 #3

带我出来的效果右边盒子在左边盒子里，尺寸是左边盒子的一半

2018-04-03 17:07:43