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实现左侧宽度固定，右侧自适应（两栏布局）？左右固定中间自适应（三栏布局）呢？
在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用 ...
随机推荐
- 校园导游系统（C++实现，VC6.0编译，使用EasyX图形库）
运行效果: 说明: 由于当年还不会使用多线程,所以很多获取用户点击的地方都是使用循环实现的...CPU占用率会比较高. 代码: //校园导游系统.cpp 1 #include <graphics ...
- 分页查询的两种方法（双top 双order 和 row_number() over ()）
--跳过10条取2条 也叫分页select top 2 * from studentwhere studentno not in (select top 2 studentno from studen ...
- AC日记——红与黑 codevs 2806
2806 红与黑 时间限制: 1 s 空间限制: 64000 KB 题目等级 : 白银 Silver 题解 查看运行结果 题目描述 Description 有一个矩形房间,覆盖正方形瓷 ...
- PHP加载另一个文件类的方法
加载另一个文件类的方法 当前文件下有a.php 和b.php,想要在class b中引入class a <?php class a { public $name = ' ...
- Android系统自带APP分析——短信app
Android操作系统本身就是一个巨大的开源软件仓库,熟悉它既可以了解到Android系统的设计框架,也可以获得高效的应用程序编写方式.本文所分析的源码来自于Google官方的AOSP源码4.0.1_ ...
- 多项式FFT相关模板
自己码了一个模板...有点辛苦...常数十分大,小心使用 #include <iostream> #include <stdio.h> #include <math.h& ...
- zlog学习笔记（level）
level.h /** * */ #ifndef __zlog_level_h #define __zlog_level_h #include "stdio.h" #include ...
- AASM rule of scoring sleep stages using EEG signal
Reference: AASM (2007). The AASM Manual for the Scoring of Sleep and Associated Events: Rules, Termi ...
- Camera.Parameters 参数
public class Camera.Parameters extends Object java.lang.Object ↳ android.hardware.Camera.Paramete ...
- Linux 信号详解六（可靠信号与不可靠信号）
#include <stdio.h> #include <stdlib.h> #include <string.h> #include <unistd.h&g ...