CSS布局——左右固定中间填满
小小例子，注意中间的div应该写在最后，留爪。
先上个高清无码图
源码实现
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link href="reset.css" rel="stylesheet" /> <!--重置默认样式,你可以把这句注释掉-->
<style>
div {
line-height:60px; /*让字体垂直居中*/
}
div.box {
width: 100%;
height: 60px;
background: yellow;
text-align: center; /*让字体水平居中*/
color: white;
}
div.box div.left, div.right {
width: 60px;
height: 60px;
background: red;
}
div.box div.left {
float: left;
}
div.box div.right {
float: right;
}
div.box div.center {
height: 60px;
background: green;
margin: 0 60px 0 60px; /*这句不要忘了，用来分开左右部分*/
}
</style>
</head>
<body>
<div class="box">
<div class="left">左固定</div>
<div class="right">右固定</div>
<div class="center">中间填满</div>
</div>
</body>
</html>
CSS布局——左右固定中间填满的更多相关文章
- css实现div的高度填满剩余空间
css实现div的高度填满剩余空间 .top{ width: 100%; height: 70px;} .bottom{background-color: #cc85d9;width: 100%;po ...
- css background-size与背景图片填满div
background-size与背景图片填满div 在开发中,常有需要将一张图片作为一个div的背景图片充满div的需求 background-size的取值及解释 background-size共有 ...
- css圆，背景,img填满等样式
background 属性 属性值 描述 background-color 单词颜色表示法.rgb.十六进制 设置元素的背景颜色 background-image url('http://www.aa ...
- 【转】CSS实现div的高度填满剩余空间
转自:http://www.cnblogs.com/zhujl/archive/2012/03/20/2408976.html 高度自适应问题,我很抵触用js去解决,因为不好维护,也不够自然,但是纯用 ...
- css布局两边固定中间自适应的四种方法
第一种:左右侧采用浮动 中间采用margin-left 和 margin-right 方法. 代码如下: <div style="width:100%; margin:0 auto;& ...
- css布局两端固定中间自适应
第一种:采用浮动 1.1首先来看一下网上一个哥们给的代码 <body> <div class="left">左</div> <div cl ...
- CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
- CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)
经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...
- DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度
一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...
- css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）
(css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...
随机推荐
- vue实现自定义音乐播放器
项目中遇到了,让实现一个音乐播放器的功能.修改其样式要求自定义,切需要有,进度条,时间,开关,应用于H5需要兼容ios与android.简单看一下如图播放器 完成代码 audioCom.vue < ...
- Docker npm install：npm ERR! code UNABLE_TO_GET_ISSUER_CERT_LOCALLY 。。reason: unable to get local issuer certificate 解决办法
这个是需要证书导致无法连接,临时解决办法是设置 npm set strict-ssl=false 在 Dockerfile文件里的 RUN npm install 之前添加 RUN npm set ...
- C# Unit test TestInitialize\TestCleanp
C# TestInitialize\TestCleanp ※※冰馨※※ 2020-12-15 09:19:37 75 收藏分类专栏: VS版权 VS专栏收录该内容197 篇文章1 订阅订阅专栏带有[C ...
- cookie和session的详解与区别-copy
会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端 ...
- w3cschool-HBase官方文档-2数据模型
HBase数据模型 2018-03-03 15:20 更新 HBase数据模型 在 HBase 中,数据模型同样是由表组成的,各个表中又包含数据行和列,在这些表中存储了 HBase 数据.在本节中,我 ...
- 常用Maven命令
一.常用命令 1.1 打包 mvn clean package -DskipTests 指定环境 mvn clean install -Dmaven.test.skip=true -Pprod-tx ...
- Hive2升hive3报错
一.网上总结的报错 1.coalesce报错 FAILED: SemanticException [Error 10014]: Line 197:4 Wrong arguments ''10'': U ...
- Hive源码解析环境搭建
一.准备工作 1.1 下载地址 https://github.com/apache/hive https://dlcdn.apache.org/hive/ 版本:2.3.9 1.2 环境依赖 had ...
- Luogu P7250 BalticOI 山峰 题解 [ 蓝 ] [ 模拟 ] [ 并查集 ] [ BFS ]
Luogu P7250 BalticOI 山峰. 一道大模拟,很暴力,也很难写.建议紫或蓝,标签为模拟.广度优先搜索.并查集. 思路 首先观察到答案取决于路线上的最低点,所以我们可以把所有点的高度丢进 ...
- 水利地理信息系统 - www.WaterGIS.cn
用C#语言开发了一个免费GIS软件,可以用来快速浏览和编辑SHAPE文件,支持天地图等. 下载可以去QQ群:722489551