情景:左边元素定长,右边元素获得剩余长度

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 左边元素定长,右边元素获得剩余长度的更多相关文章

  1. CSS 左边div固定,右边div自适应

    有时候我们会有这样的需求,如图,aside是导航或者某些链接,右边的main是显示重要的内容,左边需要定宽,右边的main能够自适应剩余的宽度: <!DOCTYPE html PUBLIC &q ...

  2. css中如何实现左边的高度随着右边改变而改变

    css中如何实现左边的高度随着右边改变而改变 html结构: <div class="main"> <div class="main_left" ...

  3. css布局:左边定宽、右边自适应

    方法一 : 左边 左浮动,右边 margin-left *{margin: 0;padding: 0;} .left{ float: left; width: 200px; border: 1px s ...

  4. CSS的伪类和伪元素

    伪类 W3C:"W3C" 列指示出该属性在哪个 CSS 版本中定义(CSS1 还是 CSS2). 属性 描述 CSS :active 向被激活的元素添加样式. 1 :focus 向 ...

  5. 奇妙的CSS之伪类与伪元素

    我们都知道,在CSS中有很多选择器,例如id(#), class(.),属性[attr],这些虽然可以满足一些需要,但有时候还力有未逮.伪类和伪元素就提供了一个有益的补充,可以使我们更高效编码.伪类和 ...

  6. [HTML/CSS]盒子模型,块级元素和行内元素

    目录 概述 盒子模型 块级元素 行内元素 可变元素 总结 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...

  7. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

  8. 仿美团外卖,饿了吗 两个ListView联动,左边点击切换右边,右边滑动切换左边

    先上效果图: 实现思路: 1.先说右边标题: 首先,右边的数据源集合中的Javabean中含有三个属性name,type,title,而每个条目中会默认含有一个标题. 如果这是第一个条目,就让标题显示 ...

  9. CSS+DIV布局初练—DIV元素必须成对出现?

    一直做C/S开发的工作,但是很少做和布局相关的工作,往往都是同事将界面设计好,自己填写代码而已,对于B/S的工作,做过,但是很少没有像C/S这么多,界面布局的话,更无从谈起. 日子就这么过,一天一个样 ...

随机推荐

  1. SVM清晰讲解——线性可分问题

    转载作者:liangdas 引言: 1995年Cortes和Vapnik于首先提出了支持向量机(Support Vector Machine),由于其能够适应小样本的分类,分类速度快等特点,性能不差于 ...

  2. win server 2003 x64 IIS配置

    新装IIS第一个报错 The 'Microsoft.Jet.OLEDB.4.0' provider is not registered on the local machine 原因是 服务器 IIS ...

  3. 阿里云安装kubernetes-UI报错endpoints \"kubernetes-dashboard\" not found解决方法

    问题:阿里云ECS安装kube-ui v5后,访问 http://master_ip:8080/ui/跳转到http://master_ip:8080/api/v1/proxy/namespaces/ ...

  4. PAT 乙级 1020 月饼 (25) C++版

    1020. 月饼 (25) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 月饼是中国人在中秋佳节时吃的一种传统食 ...

  5. 廖雪峰Java5集合-6Stack-1使用Stack

    1.栈的定义 栈Stack是一种后进先出(LIFO: Last In First Out)的数据结构,可以看作一端封闭的容器,先进去的元素永远在底部,最后出来. 栈有2个重要的方法: push(E e ...

  6. android webview内存泄露解决方法

    完整的activity的onDestroy()方法:@Override protected void onDestroy() { if( mWebView!=null) { // 如果先调用destr ...

  7. T-SQL 局部变量和全局变量

    局部变量 use StudentManageDB go --声明学号变量 ) --查询李铭的信息 set @stuname='李铭' select StudentId,StudentName,Gend ...

  8. python类的全面介绍

    转载:全面介绍python面向对象的编程——类的基础 转载:类的实例方法.静态方法.类方法的区别

  9. Servlet基础学习

    Servlet学习 Servlet是Server与Applet的缩写,是服务端小程序的意思.使用Java语言编写的服务器端程序,可以像生成动态的WEB页,Servlet主要运行在服务器端,并由服务器调 ...

  10. web前端 3大储存 Cookie、localStorge、sessionStorage

    Cookie: //setCookie function setCookie(name,value){ var Days = 30; var exp = new Date(); exp.setTime ...