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 关于两栏布局,左边固定,右边自适应
好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...
随机推荐
- python while、continue、break
while循环实现用户登录 _user = "tom" _passwd = "abc123" counter = 0 while counter < 3: ...
- 集训第六周 数学概念与方法 概率 数论 最大公约数 G题
Description There is a hill with n holes around. The holes are signed from 0 to n-1. A rabbit must h ...
- spark streaming 踩过的那些坑
系统背景 spark streaming + Kafka高级API receiver 目前资源分配(现在系统比较稳定的资源分配),独立集群 --driver-memory 50G --exec ...
- 括号序列(Poj1141)
Poj1141 题目描述: 定义合法的括号序列如下: 1 空序列是一个合法的序列 2 如果S是合法的序列,则(S)和[S]也是合法的序列 3 如果A和B是合法的序列,则AB也是合法的序列 例如:下面的 ...
- Spring Boot - how to configure port
https://stackoverflow.com/questions/21083170/spring-boot-how-to-configure-port
- Core java for impatient 笔记
类比c++来学习! 1.在java 中变量不持有对象,变量持有的是对象的引用,可以把变量看做c++中的只能指针,自动管理内存 需要手动初始化(否则就是空指针!) 2.final 相当于c++中的con ...
- POJ 1769_Minimizing maximizer
题意: 一系列m个1~n区间,每个区间固定对某个子区间进行排序,顺序选择若干区间,使最终覆盖所有区间. 分析: computes the length of the shortest subseque ...
- [bzoj2982]combination_卢卡斯
Combination bzoj-2982 题目大意:求$C_n^m/%10007$. 注释:$1\le n,m\le 2\cdot 10^9$. 想法:裸卢卡斯定理. 先处理出$mod$数之内的阶乘 ...
- SAS编程基础 - 菜鸟入门常用操作
1. SAS9.4添加和取消注释的快捷键? Ctrl+/:添加注释 Ctrl+Shift+/:取消注释 2. 如何强制终止程序运行? 看到那个圆圈里带叹号的图标了吗?没错,就是它 - 中断! 3. 如 ...
- javascript 閉包
這兩種寫法都是可以的. 第一種: function a(){ var m=[]; for(var i=1; i<10; i++){ (function(i){ function b(){ con ...