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布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...
随机推荐
- Solution Set -「AGC 007~009」C~F
目录 「AGC 007C」Pushing Balls 「AGC 007D」Shik and Game 「AGC 007E」Shik and Travel ^ 「AGC 007F」Shik and Co ...
- 第一章 dubbo源码解析目录
重要的网址: dubbo的github:https://github.com/alibaba/dubbo dubbo官网:http://dubbo.io/ dubbo使用者手册:https://dub ...
- mysql数据库指定ip远程访问(设置远程连接)，赋权操作
mysql数据库指定ip远程访问(设置远程连接) 远程访问mysql报错,ip不允许链接的情况:错误号码1045Access denied for user '用户名' @'数据库地址' (using ...
- 云辅助隐私集合求交（Server-Aided PSI）协议介绍：学习
原文来自:云辅助隐私集合求交(Server-Aided PSI)协议介绍,下面学习一波,并记录一些笔记. 背景 总结: 1.PSI-CA和PSI相比,前者在乎的是交集的大小,后者在乎的是交集本身.另外 ...
- EIP、VIP、RIP的区别
本文分享自天翼云开发者社区<EIP.VIP.RIP的区别>,作者:魏****猛 EIP.VIP.RIP都是网络中经常使用的术语,但是它们的意义和使用场景是不同的. 首先,EIP(Elast ...
- Ceph PG状态介绍
本文分享自天翼云开发者社区<Ceph PG状态介绍>,作者:wwwdl 一.基本概念 size:副本数(如三副本,size=3): min_size:支持可读写的最小副本数(如三副本,mi ...
- 设置npm、yarn和pnpm的国内镜像地址和yarn命令相关问题
1.npm 全局设置: 输入如下命令查看镜像地址: npm config get registry 输入如下命令设置镜像地址为淘宝: // 推荐地址 npm config set registry h ...
- Mac安装Charles抓包工具
一.下载安装 地址1:官网 下载地址: https://www.charlesproxy.com/download/ 激活信息 Registered Name: https://zhile.io Li ...
- 本地AI搭建
搭建本地博客AI 目录 搭建本地博客AI 环境 下载ollama 选择模型 选择embedding模型 查看性能测试 选择合适的嵌入模型(Embedder) 估算内存 选择模型 量化类型介绍 Q5_0 ...
- 2024年！ kali高级配置加一键教程加前人的经验加后人的实践
2024年! kali高级配置加一键教程加前人的经验加后人的实践 记录一下配置kali的过程,方便下次需要直接复制粘贴 直接终端按照顺序输入就可以配置好 作者已踩点,请放心 kali更换国内源 sud ...