3-3编程联系，为什么我左侧和右侧的内容显示不出来？哪个老师可以帮我看一下是哪里出了问题

1	`老师，这是我的代码，我用开发者工具查看过，左侧和右侧的内容位置没有错，但是为什么显示不出来？`

<!doctype html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type="text/css">
       *{
           padding:0;
           margin:0;
       }
       body{
           min-width:900px;
       }
       img{
           margin:0;
           padding:0;
       }
       .head{
           width:100%;
           height:100px;
           background: black
       }
       .logo{
           width:300px;
           height:100px;
           float:left;
       }
       .nav{
           width:auto;
           height:100px;
           float:right;
       }
       .nav-li{
           height: 100px;
           color:white;
           float:left;
           margin-right:40px;
           font-weight: bold;
           line-height: 100px;
       }
       .middle,.left,.right{
           position: relative;
           float:left;
           height:550px;
       }
       .container{
           margin:0 220px 0 240px;
           overflow: hidden;
       }
       .middle{
           width:100%;
           background:#ffcccc;
            word-break: break-all;
       }
       .img-1{
           margin:80px 200px;
       }
       .left{
           width:240px;
           background: #ffffcc;
           margin-left:-100%;
           left:-240px;
       }
       .right{
           width:220px;
           background:#ccffff;
           margin-left:-220px;
           right:-220px;
       }
       .foot{
           width:100%;
           float:left;
           background:black;
           height:100px;

       }
       .foot-1{
           color:white;
           height:100px;
           width:70px;
           float:left;
           line-height: 100px;
           margin:0 20px 0 20px;
       }
       .foot-2{
           width:660px;
           margin:0 auto;
       }
   </style>

</head>
<body>
   <div class="head">
       <div class="logo">
           <img src="http://img1.sycdn.imooc.com/climg//590037f600016ce303000100.png">
       </div>
       <div class="nav">
           <div class="nav-li">课程</div>
           <div class="nav-li">职业路径</div>
           <div class="nav-li">实战</div>
           <div class="nav-li">猿问</div>
           <div class="nav-li">手记</div>
       </div>
   </div>
   <div class="container">
       <div class="middle">
           <img class="img-1" src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg">
       </div>
       <div class="left">
           <p>课程推荐</p>
           <div class="left-1">
               <span>职业路径</span>
               <span>HTML5与CSS实现动态网页</span>
           </div>
           <div class="left-1">
               <span>职业路径</span>
               <span>零基础入门Android语法与界面</span>
           </div>
           <div class="left-1">
               <span>职业路径</span>
               <span>IOS基础语法与常用软件</span>
           </div>
           <div class="left-1">
               <span>职业路径</span>
               <span>PHP入门开发</span>
           </div>
           <div class="left-1">
               <span>职业路径</span>
               <span>JAVA入门开发</span>
           </div>
       </div>
       <div class="right">
           <p>登陆</p>
           <form>
               <input type="text" name="text" placeholder="请输入邮箱/手机号码"/>
               <input type="password" name="password" placeholder="6-16密码，区分大小写，不能用空格"/>
               <input type="suhmit" value="登陆"/>
           </form>
       </div>
   </div>
   <div class="foot">
   <div class="foot-2">
       <div class="foot-1">网站首页</div>
       <div class="foot-1">企业合作</div>
       <div class="foot-1">人才招聘</div>
       <div class="foot-1">联系我们</div>
       <div class="foot-1">常见问题</div>
       <div class="foot-1">友情链接</div>
   </div>
   </div>
</body>
</html>

Afflatus扶苏 2017-05-13

源自：CSS网页布局基础 3-4 双飞翼布局及案例

收起

4回答

Miss路 2017-05-15 16:28:48

这个是需要你慢慢调试的，我刚刚只是给你指出了问题所在，我写了个代码，仅供参考：

<style>

*{margin:0;padding:0;text-decoration:none;list-style:none;font-family:"Microsoft Yahei";color:#000;}

a{cursor:pointer;}

html{font-size:16px;}

/*头部样式*/

.header{width:100%;min-width:1100px;height:100px;background-color:#000;}

.header img{float:left;}

.header ul{float:right;}

.header ul li{width:96px;height:100px;line-height:100px;float:left;margin-right:20px;text-align:center;}

.header ul li a{color:#fff;font-size:1.5rem;}

.header .two{width:9rem;}

.header ul li a:hover{color:orange;}

/*主体样式*/

.container{height:840px;background-color:lightblue;padding:0 350px 0 400px;min-width:700px;}

.left,.middle,.right{

float:left;

position:relative;

}

/*主体左侧样式*/

.left{width:400px;height:690px;padding-left:4%;margin-left:-100%;left:-400px;padding-top:150px;background-color:#FFEFDB;}

.left ul{padding-left:10px;}

.left h1,.middle h1,.right h1{font-weight:normal;margin-bottom:30px;}

.left li{margin-bottom:30px;}

.left a,.middle a{font-size:20px;}

.left li span{margin-right:20px;background-color:#ff9999;}

/*主体中间样式*/

.middle{width:100%;text-align:center;background-color:pink;padding-top:150px;height:690px;}

/*主体右侧样式*/

.right{width:350px;height:690px;margin-left:-350px;right:-350px;padding-top:150px;background-color:lightblue;}

.right h1{margin-left:10px;}

.right form{padding-left:10px;}

.right input{display:block;margin-bottom:30px;width:300px;height:50px;padding-left:10px;}

.right .submit{width:314px;background-color:red;height:60px;;border:none;color:white;font-size:24px;}

.footer{width:100%;height:100px;line-height:100px;background-color:#000;}

.footer ul{width:900px;margin:0 auto;overflow:hidden;}

.footer li{float:left;width:100px;margin-right:50px;}

.footer li a{color:#fff;font-size:1.2rem;}

</style>

------------------

<body>

<ul>

</ul>

</div>

</div>

<ul>

<li><a href="#"><span>职业路径</span>HTML5与CSS3实现动态网页</a></li>

<li><a href="#"><span>职业路径</span>零基础入门Android语法与界面</a></li>

<li><a href="#"><span>职业路径</span>iOS基础语法与常用控件</a></li>

<li><a href="#"><span>职业路径</span>PHP入门开发</a></li>

<li><a href="#"><span>职业路径</span>JAVA入门开发</a></li>

</ul>

</div>

</form>

</div>

<ul>

</ul>

</div>

</body>

收起回答

提问者 Afflatus扶苏 #1

谢谢老师，我又认真看了一下，发现我之前是清除浮动效果代码写错了

2017-05-15 17:02:03
Miss路回复提问者 Afflatus扶苏 #2

我是该哭还是该笑呢，以后细心一点哦，遇到问题不要着急，加油！

2017-05-15 19:20:38

Miss路 2017-05-15 14:59:02

你right里面有一句margin-left: -220px; 去掉就显示了，left中去掉 left: -240px;就显示了，你给他们都设置的隐藏了亲爱的，

收起回答

提问者 Afflatus扶苏 #1

老师，我试了，还是不行啊，right中去掉margin-left: -220px; ，我右侧的内容就跑到另一行去了，left中去掉 left: -240px;，虽然显示了但是位置不对啊，我这个圣杯布局的代码和视频里讲解的没错啊，怎么就不显示呢？

2017-05-15 15:59:15