css实现左边div固定宽度,右边div自适应撑满剩下的宽度
(1)使用float
- <div class="use-float">
- <div></div>
- <div></div>
- </div>
- .use-float>div:first-child{
- width:100px;
- float:left;
- }
- .use-float>div:last-child{
- overflow:hidden;
- }
------------------------------------------------------------------------------------------------------------------------------
(2)使用table
- <table class="use-table">
- <tr>
- <td></td>
- <td></td>
- </tr>
- </table>
- .use-table{
- border-collapse:collapse;
- width:100%;
- }
- .use-table>tbody>tr>td:first-child{
- width:100px;
- }
-----------------------------------------------------------------------------------------------------------------------------
(3)用div模拟table
- <div class="use-mock-table">
- <div></div>
- <div></div>
- </div>
- .use-mock-table{
- display:table;
- width:100%;
- }
- .use-mock-table>div{
- display:table-cell;
- }
- .use-mock-table>div:first-child{
- width:100px;
- }
-----------------------------------------------------------------------------------------------------------------------------
(4)使用flex
- <div class="use-flex">
- <div></div>
- <div></div>
- </div>
- .use-flex{
- display:flex;
- }
- .use-flex>div:first-child{
- flex:none;
- width:100px;
- }
- .use-flex>div:last-child{
- flex:;
- }
css实现左边div固定宽度,右边div自适应撑满剩下的宽度的更多相关文章
- 实现左边div固定宽度,右边div自适应撑满剩下的宽度的布局方式:
html: <div class="container"> <div class="left"> left固定宽度200px </ ...
- 左边div固定宽度,右边div自适应撑满剩下的宽度--实现方法汇总
神奇的事 其实有的方法(float.position.margin.flex)是有border像素的差 代码如下: <!DOCTYPE html><html><head ...
- css实现左边定宽右边自适应的5种方法总汇
在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left&quo ...
- HTML左边盒子固定,右边盒子自适应
html: <div class="box1"> <div class="divA">DIVA</div> <div ...
- CSS 左边div固定,右边div自适应
有时候我们会有这样的需求,如图,aside是导航或者某些链接,右边的main是显示重要的内容,左边需要定宽,右边的main能够自适应剩余的宽度: <!DOCTYPE html PUBLIC &q ...
- css样式实现左边的固定宽度和高度的图片或者div跟随右边高度不固定的文字或者div垂直居中(文字高度超过图片,图片跟随文字居中,反之文字跟随图片居中非table实现)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 实现一个div,左边固定div宽度200px,右边div自适应
实现一个div,左边固定div宽度200px,右边div自适应<div class= "container"> <div class="left&quo ...
- css网页布局 --- 左边固定,右边自适应
div的布局统一如下: <body> <div class="wrap"> <div class="left"></d ...
- css 关于两栏布局,左边固定,右边自适应
好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...
随机推荐
- Spring AOP配置简单记录(注解及xml配置方式)
在了解spring aop中的关键字(如:连接点(JoinPoint).切入点(PointCut).切面(Aspact).织入(Weaving).通知(Advice).目标(Target)等)后进行了 ...
- hadoop_exporter python版本的安装使用
1.需要使用python pip 参考https://www.cnblogs.com/rain124/p/6196053.html python2.7.5 安装pip 1 先安装setuptools ...
- nativeLibraryDirectories=[/data/app/com.lukouapp-1/lib/arm64, /vendor/lib64, /system/lib64]]] couldn't find "libxxxx.so
一开始我遇到的问题是,如果手机有SD卡槽,则不管有没有插卡,都会闪退,打日记后发现是找不到so文件.报错日记如下: nativeLibraryDirectories=[/data/app/com.lu ...
- HDU 5458 Stability
Stability Time Limit: 2000ms Memory Limit: 102400KB This problem will be judged on HDU. Original ID: ...
- noip模拟赛 少女
分析:每个连通块都是独立的,对一个连通块进行分析.如果边数>点数,显然是不可能的,因为每条边要分配给一个点,至少有一个点分配了两次以上.如果边数=点数,就形成了环,有两种方案,顺时针一个环,逆时 ...
- EasyUI单击行数据时动态编写editor
$.extend($.fn.treegrid.methods, { addEditor: function (jq, param) { if (param instanceof Array) { $. ...
- PatentTips - Universal RAID Class Driver
BACKGROUND OF THE INVENTION The present invention relates to the field of data storage devices. Comp ...
- Linux下汇编语言学习笔记7 ---
这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...
- hdu - 3549 Flow Problem (最大流模板题)
http://acm.hdu.edu.cn/showproblem.php?pid=3549 Ford-Fulkerson算法. #include <iostream> #include ...
- Codeforces 645A Amity Assessment【八数码】
题目链接: http://codeforces.com/problemset/problem/645/A 题意: 2*2的八数码问题 分析: 这题n为2,不需要搜索,直接判断字母排列顺序就好了. 注意 ...