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:;
padding:;
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:;
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:;
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:;
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 左边固定，右边自适应的更多相关文章
- HTML布局之左右结构，左边固定右边跟据父元素自适应
HTML布局之左右结构,左边固定右边跟据父元素自适应,兼容IE6+.Firefox.Chrome.Opera.Safari,这里是用表单写的一个demo,其实就在主体布局中也是可以的,比如像后台一些管 ...
- flex左右布局 左边固定 右侧自适应
flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...
- css-两个div并排，左边宽度固定右边自适应的布局 的实现方法
<div class= "container"> <div class="left"></div> <div clas ...
- css布局：左边固定宽度，右边自适应宽度或右侧固定，左侧自适应三种方法
方法一:浮动布局 这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...
- css 关于两栏布局，左边固定，右边自适应
好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...
- 实现一个div，左边固定div宽度200px，右边div自适应
实现一个div,左边固定div宽度200px,右边div自适应<div class= "container"> <div class="left&quo ...
- 再探display:table-cell &&左边固定、右边自适应
display:table-cell;这个属性用的不多,它和td差不多,但是如果可以用好还是能收益不少的,下面举例说明. 1. 父元素display:table-cell,并设置verticle-al ...
- css布局：左边固定宽度，右边自适应；右边固定宽度，左边自适应
左边固定宽度,右边自适应 浮动布局的方法 <section class="container homeSection" id="mainSection"& ...
- css实现左边定宽右边自适应的5种方法总汇
在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left&quo ...
- 如何用CSS实现左侧宽度固定，右侧自适应（两栏布局）？左右固定中间自适应（三栏布局）呢？
在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用 ...
随机推荐
- 怎么解决ZBrush保存历史记录太多问题
经常有用户反映说ZBrush ®保存历史记录太多了,导致文件太大了!模型已经是降低级别保存了,在保存历史记录的时候还是很慢很慢,不知道怎么才能减少ZBrush保存的历史步骤的多少.针对这一问题,小编统 ...
- Appium学习实践（二）Python简单脚本以及元素的属性设置
1.简单的Python脚本 Appium中的设置与Appium学习实践(一)简易运行Appium中的一致 Launch后,执行脚本 #coding:utf-8 import unittest impo ...
- POJ2796Feel Good[单调栈]
Feel Good Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 13376 Accepted: 3719 Case T ...
- Prefab Assist插件
资料 Prefab文档: http://game.ceeger.com/Manual/Prefabs.html 基础:基于NGUI制作组件的Prefab 前言 在一个游戏的UI中,有一些通用的组件,比 ...
- Sass关于颜色函数的乐趣
阅读目录 1. 了解RGB和HSL颜色标准 2. RGB函数 3. HSL函数 4. Opacity函数 5. 其他颜色函数 6. 一个简单的应用 在Sass中,定义了很多现成的函数,可供我们使用.在 ...
- 一类有依赖的树形背包dp方法
失踪人口回归系列 这个标题是不是看起来很厉害呢233 给一道例题:有一个树,每一个节点代表一个物品,每个物品有重量和价值,每个物品必须先选父亲才能选自己.求给定重量内最大价值. 这题的思路十分的厉害. ...
- radio被选中，但是重复点击后事件不触发
网上找了好多帖子,都没用,在百度知道发现以下答案 知识点:使用 jq的prop才能设置 html $('.ss').click(function(){ $(this).find("input ...
- usb驱动开发15之设备生命线
总算是进入了HCD的片儿区,既然来到一个片区,怎么都要去拜会一下山头几个大哥吧.,先回忆一些我们怎么到这里的?给你列举一个调用函数过程usb_control_msg->usb_internal_ ...
- 20款最佳用户体验的Sublime Text 2/3主题下载及安装方法
20款最佳用户体验的Sublime Text 2/3主题下载及安装方法
- 前端见微知著番外篇：GIT舍我其谁？
在上一篇中,我们讲到了利用纯UI的软件如何实现代码的提交.但是在MAC机器上,是没有turtoiseGit这类软件的,所以利用命令行的方式就是我们的首选了. 下面我们来描述两种主要的Git使用场景: ...