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 关于两栏布局,左边固定,右边自适应
好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...
随机推荐
- MFC对话框使用CPrintDialog实现打印,指定打印机、后台打印
推荐下 不错. 对话框打印,网上一搜一大堆,基本分2类: A类: CPrintDialog.DoModal,然后在模态对话框里选打印机.打印配置: B类:GetPrinterDeviceDefault ...
- Jmeter关联,正则表达式提取器使用1
Jmeter关联,正则表达式提取器使用 一.Jmeter关联的方式: Jmeter中关联可以在需要获取数据的请求上 右键-->后置处理器 选择需要的关联方式,如下图有很多种方法可以提取动态 ...
- HTML基础知识 table中 th,td,tr
https://www.2cto.com/kf/201711/701872.html table是一个布局神器,之前看过很多代码,都是用table布局的.但是,我在学习的过程中,发现table有很迷的 ...
- bzoj 1430 小猴打架 prufer 性质
小猴打架 Time Limit: 5 Sec Memory Limit: 162 MBSubmit: 709 Solved: 512[Submit][Status][Discuss] Descri ...
- Codeforces 629D Babaei and Birthday Cake(线段树优化dp)
题意: n个蛋糕编号从小到大编号,j号蛋糕可以放在i号上面,当且仅当j的体积严格大于i且i<j,问最终可得的最大蛋糕体积. 分析: 实质为求最长上升子序列问题,设dp[i]从头开始到第i位的最长 ...
- POJ 3469_Dual Core CPU
题意: N个模块可以在A,B两个核上运行,分别需要A[i]和B[i],模块之间需要传递数据,若两个模块在同一核上,则不需要花费,否则需要花费w[i].问最少需要花费多少? 分析: 用最小的费用将两个对 ...
- zoj2853 Evolution
给定一个进化的矩阵图,问在m次之后最终的物种有多少个,实际上这和线性代数及其应用里的一个例题是一样的...总之就相当于煞笔的套个矩阵不断去乘m次,然后每次都会根据得到进化后各物种的个数,矩阵快速幂求一 ...
- 文件I/O和标准I/O
转载:https://blog.csdn.net/kyang_823/article/details/79496561 一.文件I/O和标准I/O文件I/O:文件I/O也称为不带缓冲的I/O(unbu ...
- 洛谷 P3609 [USACO17JAN]Hoof, Paper, Scissor蹄子剪刀…
P3609 [USACO17JAN]Hoof, Paper, Scissor蹄子剪刀… 题目背景 欢迎提供翻译,请直接在讨论区发帖,感谢你的贡献. 题目描述 You have probably hea ...
- Ubuntu 16.04安装7zip的图形界面工具PeaZip
其实PeaZip不是7zip的图形界面工具,而是一整套方案,里面包括了7z格式的解压缩等. PeaZip Linux版本只有32位包,如果你使用的是64位Ubuntu系统,那么先打开终端运行下面的命令 ...