[记录] CSS 左边元素定长,右边元素获得剩余长度
情景:左边元素定长,右边元素获得剩余长度
1. 左边设置浮动,右边元素宽度auto,可以不设置,默认auto,然后设置margin-left:左边元素宽度

<ul class="entry">
<li class="options"><a href="#">企业要闻</a></li>
<li class="options"><a href="#">总部动态</a></li>
<li class="options"><a href="#">国资动态</a></li>
<li class="more"><a href="#">更多</a></li>
</ul>

.options {
height: 26px;
width: 86px;
text-align: center;
float: left;
border-top: 1px #ccc solid;
border-right: 1px #ccc solid;
border-bottom: 1px #ccc solid;
}
.more {
height: 26px;
width: auto;
margin-left: 260px;
text-align: right;
padding-right: 10px;
border-top: 1px #ccc solid;
border-bottom: 1px #ccc solid;
}
2. 使用弹性盒子 (浏览器兼容性问题)
[记录] CSS 左边元素定长,右边元素获得剩余长度的更多相关文章
- CSS 左边div固定,右边div自适应
有时候我们会有这样的需求,如图,aside是导航或者某些链接,右边的main是显示重要的内容,左边需要定宽,右边的main能够自适应剩余的宽度: <!DOCTYPE html PUBLIC &q ...
- css中如何实现左边的高度随着右边改变而改变
css中如何实现左边的高度随着右边改变而改变 html结构: <div class="main"> <div class="main_left" ...
- css布局:左边定宽、右边自适应
方法一 : 左边 左浮动,右边 margin-left *{margin: 0;padding: 0;} .left{ float: left; width: 200px; border: 1px s ...
- CSS的伪类和伪元素
伪类 W3C:"W3C" 列指示出该属性在哪个 CSS 版本中定义(CSS1 还是 CSS2). 属性 描述 CSS :active 向被激活的元素添加样式. 1 :focus 向 ...
- 奇妙的CSS之伪类与伪元素
我们都知道,在CSS中有很多选择器,例如id(#), class(.),属性[attr],这些虽然可以满足一些需要,但有时候还力有未逮.伪类和伪元素就提供了一个有益的补充,可以使我们更高效编码.伪类和 ...
- [HTML/CSS]盒子模型,块级元素和行内元素
目录 概述 盒子模型 块级元素 行内元素 可变元素 总结 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...
- CSS中伪类及伪元素用法详解
CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...
- 仿美团外卖,饿了吗 两个ListView联动,左边点击切换右边,右边滑动切换左边
先上效果图: 实现思路: 1.先说右边标题: 首先,右边的数据源集合中的Javabean中含有三个属性name,type,title,而每个条目中会默认含有一个标题. 如果这是第一个条目,就让标题显示 ...
- CSS+DIV布局初练—DIV元素必须成对出现?
一直做C/S开发的工作,但是很少做和布局相关的工作,往往都是同事将界面设计好,自己填写代码而已,对于B/S的工作,做过,但是很少没有像C/S这么多,界面布局的话,更无从谈起. 日子就这么过,一天一个样 ...
随机推荐
- 求1~n整数中1出现的次数(《剑指offer》面试题43)
题意: 给定一个整数n,求1~n这n个整数中十进制表示中1出现的次数. 思路: 方法1:最直观的是,对于1~n中的每个整数,分别判断n中的1的个数,具体见<剑指offer>.这种方法的时间 ...
- 了解轮询、长轮询、长连接、websocket
业务开发中我们往往会有一些需要即时通信的场景,比如微信扫码登录.聊天功能. 下面这四种方式都可以实现即时通信. 轮询: 浏览器通过定时器每隔一段时间向服务器端发送请求,服务器端收到请求并响应请求.没有 ...
- shiro登录实现自定义路径跳转
一.实现需求 登录框架采用shiro,需根据不同客户端类型实现相对应定义页面跳转. 二.登录页jsp表单 <div class="input-prepend" title=& ...
- 新建本地仓库,同步远程仓场景,出现git branch --set-upstream-to=origin/master master 解决方法
1.本地创建一个本地仓库 2.关联远程端:git remote add origin git@github.com:用户名/远程库名.git3.同步远程仓库到本地git pull这个时候会报错If y ...
- 查看app日志的方法
可以打开SDk里面的 ddms.bat 查看日志 路径: android-sdk-macosx/tools/ddms SDK下载的地址: http://www.androiddevtools.cn/ ...
- hadoop 完全分布式安装
一个完全的hadoop分布式安装至少需要3个zookeeper,3个journalnode,3个datanode,2个namenode组成. 也就是说需要11个节点,但是我云主机有限,只有3个,所以把 ...
- WordPress无法显示Gravatar头像的解决方法
最近捣鼓WordPress博客发现无法正常显示Gravatar头像,查找原因是因为国内屏蔽了Gravatar导致的,这导致无数国内Wordpress网站头像无法显示,并且影响到了相关页面的访问速度(如 ...
- 【转】XP_cmdshell存储过程
原文地址:http://www.cnblogs.com/love_study/archive/2010/03/02/1676583.html 一 .简介 xp_cmdshell 扩展存储过程将命令字符 ...
- 三种通用应用层协议protobuf、thrift、avro对比,完爆xml,json,http
原文: https://www.douban.com/note/523340109/ Google protobuf: 优点 二进制消息,性能好/效率高(空间和时间效率都很不错) proto ...
- 总结查看端口、进程占用情况(lsof、netstat、ps、kill)
一.Linux查看端口占用情况 1.lsof(list open files)列出当前系统打开文件 查看指定端口号语法格式: lsof -i:端口号 如果命令找不到 [root@bogon ~]# l ...