为了账号安全,请及时绑定邮箱和手机立即绑定

三栏布局,中间自适应要怎么调呢?代码如下,总算憋出来了,但是好复杂

三栏布局,中间自适应要怎么调呢?代码如下,总算憋出来了,但是好复杂

慕粉151200503 2017-03-31 11:32:26
#left{               float:left;                padding:20px;                border:2px solid #999;                margin:0px;                position:absolute;                width:100%;                height:98%;                background:#eee;                }                .right{                    right:20px;                    position:absolute;                    float:right;                    border:2px solid #999;                    padding:20px;                    width:120px;                                        background:white;                    }                .div1{                border:2px solid #999;                float:left;                position:relative;                padding:20px;                left:0;                width:200px;                height:80px;                background:white;                }                .div2{                left:0;                position:relative;                border:2px solid #999;                    width:90px;                height:60px;                padding-top:20px;                float:left;                background:#eee;            }            h4{                                float:right;            }            .main{                padding:20px;                    border:2px solid #999;                height:80%;                text-align:center;                background:white;                margin:0 210px 0 270px;                position:absolute;            }            .logo1{                                text-align:centenr;                border:2px solid #999;                padding:20px;                margin:10px;                background:#eee;                width:60px;                            }            .logo2{                border:2px solid #999;                padding:20px;                margin:10px;                background:#eee;                text-align:centenr;                width:60px;            }            .logo3{                border:2px solid #999;                padding:20px;                margin:10px;                background:#eee;                text-align:centenr;                width:60px;            }            .logo4{                border:2px solid #999;                padding:20px;                margin:10px;                background:#eee;                text-align:centenr;                width:60px;            }            </style>            </head>    <body>        <div id="left">                <div  class="div1"><h4>团队名称</h4>            <div class="div2"><center>团队LOGO</br>80x80</center></div></div>                    <div class="main">关于你们团队的介绍</br>            我们是一组由大学生组成的学习团队,都是JS入门级别的菜鸟。</div>        <div class="right">            <div class="logo1">个人LOGO</br>80x80</div>            <div class="logo2">个人LOGO</br>80x80</div>            <div class="logo3">个人LOGO</br>80x80</div>            <div class="logo4">个人LOGO</br>80x80</div>        </div>        </div>    </body></html>
查看完整描述

1 回答

?
候补程序员

TA贡献1条经验 获得超0个赞

#left {
    /* float: left; */
    padding: 20px;
    border: 2px solid #999;
    margin: 0px;
    /* position: absolute; */
    /* width: 100%; */
    height: 98%;
    background: #eee;
}
.main {
    /* padding: 20px; */
    border: 2px solid #999;
    height: 80%;
    text-align: center;
    background: white;
    margin: 0 200px 0 300px;
    /* position: absolute; */
}
.right {
    right: 20px;
    position: absolute;
    float: right;
    border: 2px solid #999;
    padding: 20px;
    width: 120px;
    top: 20px;
    background: white;
}

你的主要问题是乱用定位,把这几个类换掉就可以了

查看完整回答
反对 回复 2017-03-31
  • 1 回答
  • 0 关注
  • 1220 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信