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 关于两栏布局,左边固定,右边自适应
好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...
随机推荐
- 集训第五周动态规划 I题 记忆化搜索
Description Michael喜欢滑雪百这并不奇怪, 因为滑雪的确很刺激.可是为了获得速度,滑的区域必须向下倾斜,而且当你滑到坡底,你不得不再次走上坡或者等待升降机来载你.Michael想知道 ...
- Spring核心技术(八)——Spring自动装载的注解
本文针对自动装载的一些注解进行描述. 基于注解的容器配置 @Required注解 @Required注解需要应用到Bean的属性的setter方法上面,如下面的例子: public class Sim ...
- allegro中出光绘文件遇到问题的解决办法
一:设置好光绘文件参数后,选择check dabase before artwork后,点击生成光绘时出现错误告警信息: database has errors:artwork generati ...
- private关键字
Student.java /* * 学生类 * * 通过对象直接访问成员变量,会存在数据安全问题 * 这个时候,我们就想能不能不让外界对象直接访问成员变量呢? * 答案:能 * 如何实现呢? * pr ...
- IOC&DI
[概述] 1.IOC(Inversion of Control): 即“反转控制”,不是什么技术,而是一种设计思想.其思想是反转资源获取的方向. 传统的资源查找方式要求组件向容器发起请求查找资源.作为 ...
- jquery动态绑定元素
按照正常给静态元素绑定事件的写法换成给动态元素绑定事件会不管用,要用下面的方式: 简单说就是给要绑定元素的父元素绑定事件,参数中指明要绑定该父元素下面的哪个元素就行,这样就不管你这个元素是不是新增的, ...
- MTK TP手势添加
old: #include "tpd.h" #include "tpd_custom_gt9xx.h" #ifndef TPD_NO_GPIO #include ...
- java 判断一个字符串是否为纯数字
if (getUid().matches("[0-9]+")) { Log.v("纯数字");} else { Log.v("非纯数字"); ...
- Being a Good Boy in Spring Festival 博弈论 Nim博弈
易游戏雷火盘古校园招聘开始! kiki's game Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 40000/10000 K (Ja ...
- linux下常用快捷方式
一.终端最常用的快捷键: 1.新建终端窗口:crtl+shift+n 2.终端的切换:shift+左右箭头 3.挂起:crtl+s 4.解除挂起:crtl+q 5.清屏:crtl+l 二.命令行光标移 ...