                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /如何用CSS进行网页布局

不用定位用浮动，但是我写的这个效果有几个问题求解答。

想问的在截图里面的注释。

Happy_learning

2016-05-22

源自：如何用CSS进行网页布局 5-3

关注问题我要回答

732

操作

收起

2 回答

Himushroom 回答被采纳 +3 积分
2016-05-25

你代码里面有几个点：

题目里面要求顶部和底部宽度自适应，所以width:100%;这个可以不用写，浏览器默认就是width:100%;
你在.right里面设置的这个margin-left：210px；是因为你给它设置了float：right；再margin-left自然看不出效果
你在右边模块里面输入字母确实会溢出，如果输入汉字的话则会把模块撑大，这是由于浏览器默认的换行属性导致的，你可以在右边模块的css中加上属性word-break：break-all；再试试
下面是我写的，可能也有不对的地方，不过刚好你提的两个问题都可以解决，你可以参考一下哈：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>混合布局编程挑战</title>

body{ margin:0; padding:0; font-size:30px; color:#fff}

.top{height:100px;background:#ccc;}

.main{height:500px;background:red;}

.left{width:200px;height:500px;margin-right:-210px;background:blue;float:left;}

.right{height:500px;background:#9acc99;margin-left:210px;float: right;word-break:break-all;}

.foot{height:100px;background:#FF6634;clear:both;}

</style>

</head>

<body>

<div class="right">rightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightvvrighthhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</div>

</div>

</body>

</html>