首页 > 代码库 > inline-block 左边固定，右边自适应
inline-block 左边固定，右边自适应
<body> <div class="col-md-4 left"> <div class="logo">默沙东盲讲</div> <ul class="menu"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <div class="col-md-8 right"> <div class="col-md-8 close">close</div> <div class="col-md-8 link"> <a href="">路径菜单</a> <a href="">路径菜单</a> <a href="">路径菜单</a> <a href="">路径菜单</a> <a href="">路径菜单</a> </div> <div class="mai"> <div class="box"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> </div> </div> </div> </body>body,html,ul,li{ margin: 0; padding: 0; list-style: none; } .left{ /*background: #00ABA1;*/ width: 33.33%; max-width: 200px; height: auto; float: left; padding: 20px; margin: 10px; font-family: "微软雅黑"; font-size: 18px; color: white; margin-right: 24px; } .left .logo{ width: 200px; max-width: 200px; height: 40px; padding: 20px; background: #027f78; font-family: "微软雅黑"; font-weight: 600; font-size: 26px; } .left .menu{ height: auto; } .menu li{ width: 200px; max-width: 200px; height: 30px; text-align: center; line-height: 30px; font-family: "微软雅黑"; font-size: 18px; background: #00ABA1; padding: 20px; } .menu li:hover{ background: #03c6bb; color: white; } .right{ background: #555555; margin-top: 30px; float: left; width: 80%; height: auto; } .right .close { padding: 10px; text-align: right; color: white; font-size: 18px; font-weight: 600; line-height: 30px; height: 30px; padding-right: 20px; background: #333; } .right .link { height: 24px; background: f3f3f3; font-size: 14px; color: white; padding: 4px; padding-left: 10px; vertical-align: middle; line-height: 24px; } .link a{ color: white; text-decoration: none; } .link a:link{ color: white; } .link a:visited{ color: white; } .link a:hover{ color: #00ABA1; } .link a:after{ content: ‘/‘; color: white; font-weight: 400; margin-right: 2px; } /*取销最后一个标签的“/”*/ .link a:last-child::after{ content: ‘‘; } .mai{ background: #f3f3f3; height: auto; } .box { /*因为box是inline-block排列的，因此它们的居中按文字的方式来*/ text-align: center; padding: 22px; } .box1,.box2,.box3,.box4{ width: 200px; height: 200px; display: inline-block; margin: 50px; border: 1px solid #00ABA1; }
inline-block 左边固定，右边自适应
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。