[记录] 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这么多,界面布局的话,更无从谈起. 日子就这么过,一天一个样 ...
随机推荐
- ALGO-18_蓝桥杯_算法训练_单词接龙(搜索)
问题描述 单词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已知一组单词,且给定一个开头的字母,要求出以这个字母开头的最长的“龙”(每个单词都最多在“龙”中出现两次),在两个单词相连时,其重合 ...
- Windows 使用windump进行循环抓包
准备工作 1.下载tcpdump http://www.winpcap.org/windump/ 2.下载WinPcaphttp://www.winpcap.org/install/bin/WinP ...
- 使用Google cardboard 2的一些软件
最近入手cardboard2,FQ尝试了一些软件,特别分享,给大家提供一些方便. 链接:http://pan.baidu.com/s/1slehilZ 密码:b49h
- 百度地图 android SDKv2.2.0
首先创建自己的KEY http://lbsyun.baidu.com/apiconsole/key 然后点击设置 参照官网文档点击下面连接 官网文档 http://developer.baidu.c ...
- VLAN IEEE802.1Q
一. VLAN产生原因-广播风暴 传统的局域网使用的是HUB,HUB只有一根总线,一根总线就是一个冲突域.所以传统的局域网是一个扁平的网络,一个局域网属于同一个冲突域.任何一台主机发出的报文都会被同一 ...
- 高可用hadoop的hdfs启动的时候namenode启动不了
启动的时候,一直要求输入namenode密码: 查看namenode的日志如下: 2019-03-28 18:38:08,961 INFO org.apache.hadoop.ipc.Client: ...
- Android定位服务关闭和定位(悬浮)等权限拒绝的判断
public void checkLocationPermission() { if (!PermissionHelper.isLocServiceEnable(this)) {//检测是否开启定位服 ...
- java eclipse maven The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path 解决方法
在eclipse 中使用maven 创建java web项目,启动服务器遇到提示:The superclass "javax.servlet.http.HttpServlet" w ...
- 数组.html
<script > var arr1 = [1, 2, 3, 4, 5, 6 ]; 赋值 var arr2 =Array(1,2,3,4,5,6); var arr3 = new Arra ...
- ubuntu 16.04 配置静态ip 后默认的网卡eno1变成eth0了不能联网的问题解决
我这次是在真实机器上面安装的ubuntu16.04 在配置了静态ip后不懂什么原因默认的eno1网卡变回了eth0网卡之后就不能上网, 同一个网段的其他集群节点也不能ping 通 因为ubuntu16 ...