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实现左侧宽度固定，右侧自适应（两栏布局）？左右固定中间自适应（三栏布局）呢？
在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用 ...
随机推荐
- 创建MyOffice项目
创建查看评分窗体(FrmLOOK),添加定义成员数组,将员工数据绑定到FrmLOOK窗体的ListView控件上 public ListViewItem lv; private void Form1_ ...
- VIJOS P1037搭建双塔[DP]
描述 2001年9月11日,一场突发的灾难将纽约世界贸易中心大厦夷为平地,Mr. F曾亲眼目睹了这次灾难.为了纪念“9?11”事件,Mr. F决定自己用水晶来搭建一座双塔. Mr. F有N块水晶,每块 ...
- Unity Camera的两种模式
http://www.cnblogs.com/zhaoqingqing/p/3302484.html
- java 26 - 8 网络编程之 TCP协议的练习
TCP练习: 1.客户端键盘录入,服务器输出文本文件 客户端代码: public class ClientDemo { public static void main(String[] args) t ...
- Eclipse c++代码提示，覆盖下面代码的问题。
今天在使用Eclipse自动提示时,会覆盖下面行的代码!!! 这个错误几乎不能忍,goolge无果. 手动尝试去掉,全部代码提示,终于找到解法办法,但是原因未知. 如下图:需要去掉 "Par ...
- BZOJ 1257: [CQOI2007]余数之和sum
1257: [CQOI2007]余数之和sum Time Limit: 5 Sec Memory Limit: 162 MBSubmit: 3769 Solved: 1734[Submit][St ...
- IntelliJ IDEA运行tomcat项目编码错误, 及如何指定tomcat编码
刚开始用IDEA, 在跑dubbo开发时, 发现一个很奇怪的问题, 远程调用服务端的方法时, 传入的中文参数会变成GBK编码. 经过好长时间的跟踪终于把问题定位到了IDEA里配置的Tomcat. 凡是 ...
- PAT 1003. 我要通过！(20)
"答案正确"是自动判题系统给出的最令人欢喜的回复.本题属于PAT的"答案正确"大派送 -- 只要读入的字符串满足下列条件,系统就输出"答案正确&quo ...
- 4809 江哥的dp题c
4809 江哥的dp题c 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 题目描述 Description 有两个数x,y,一开始x=1,y= ...
- SharePoint 2013无代码实现列表视图的时间段动态筛选
本文介绍两种为列表视图设置时间段筛选器的方法.其中,第一个方法用于SharePoint Server,第二个方法同时还能用于SharePoint Foundation. 方法一:日期筛选器Web部件 ...