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实现左侧宽度固定，右侧自适应（两栏布局）？左右固定中间自适应（三栏布局）呢？
在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用 ...
随机推荐
- 翻译《Writing Idiomatic Python》（三）：变量、字符串、列表
原书参考:http://www.jeffknupp.com/blog/2012/10/04/writing-idiomatic-python/ 上一篇:翻译<Writing Idiomatic ...
- 常用Meta整理
标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他web 服务. ——W3School 必要属性 ...
- 嵌入式Linux驱动学习之路(四)u-boot编译分析
u-boot编译分析 在配置完成后,执行make开始编译.这里打开Makefile. 首先在目标all前有一句话首先检查是否有include/config.mk文件来判断是否成功配置过. ifeq ( ...
- Win7 + ubuntu14.04 双系统安装教程
安装主要分为以下几步: 一． 下载Ubuntu 14.04镜像软件: 二． 制作U盘启动盘: 三． 安装Ubuntu系统: 四． 用EasyBCD 创建启动系统. 1. 下载 Ubuntu 14.04 ...
- OC中的指针
NSError *err = nil; NSError __strong **error = &err; //因为在oc中,通过* *err 创建的指针是用__strong修改的,所以要一致, ...
- mysql线上一个定时备份脚本
数据库服务使用的是阿里云的mysql,远程进行定时的全量备份,备份到本地,以防万一.mysql数据库远程备份的数据最好打包压缩: [root@huanqiuPC crontab]# pwd/Data/ ...
- smarty foreach循环
1,smarty foreach1,单纯的数组array(1000,2000,3000),使用foreach(from = $array item=foo){$foo}2,键值对数组<ul> ...
- win7 IIS7.5配置伪静态
转自:http://www.cnblogs.com/luckly-hf/archive/2013/03/07/2947687.html 第一部: 从如下地址中下载URLRewriter组件组件: 官方 ...
- mvc route的注册，激活，调用流程
mvc route的注册,激活,调用流程(三) net core mvc route的注册,激活,调用流程 mvc的入口是route,当前请求的url匹配到合适的route之后,mvc根据route所 ...
- mac 下卸载mysql的方法
今天在mac上瞎折腾时,把mysql玩坏了,想卸载重装,却发现找不到卸载程序,百度了下,将操作步骤备份于此: cd ~/ sudo rm /usr/local/mysqlsudo rm -rf /us ...