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 关于两栏布局,左边固定,右边自适应
好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...
随机推荐
- 集训第六周 数学概念与方法 概率 F题
Submit Status Description Sometimes some mathematical results are hard to believe. One of the common ...
- Session与Token的区别
1. 为什么要有session的出现?答:是由于网络中http协议造成的,因为http本身是无状态协议,这样,无法确定你的本次请求和上次请求是不是你发送的.如果要进行类似论坛登陆相关的操作,就实现不了 ...
- [OJ#39]左手右手
[OJ#39]左手右手 试题描述 有 n 个人,每个人左右手上各写着一个整数.对于编号为 a 的人和编号为 b 的人, a 对 b 的好感度等于 a 左手上写的数字乘 b 右手上写的数字,a 和 b ...
- Java 学习(5):修饰符 运算符
目录 --- 修饰符 --- 运算符 --- 循环结构 --- 分支结构 修饰符: 修饰符用来定义类.方法或者变量,通常放在语句的最前端.如下: public class className { // ...
- 【HDOJ4812】D Tree(点分治)
题意: 给定一棵 n 个点的树,每个点有权值 Vi 问是否存在一条路径使得路径上所有点的权值乘积 mod(10^6 + 3) 为 K 输出路径的首尾标号,若有多解,输出字典序最小的解 对于100%的数 ...
- Codeforces704B. Ant Man
n<=5000个数轴上的点,有属性x,a,b,c,d,从i跳到j的代价如下: 问从s跳到t的最小代价. 方法?:先构造s->t链,然后依次插入其他点,每次选个最佳的位置.过了这题,正确性不 ...
- CSS3(各UI元素状态伪类选择器受浏览器的支持情况)
选择器 Firefox Safari Opera IE Chrome E:hover Y Y Y Y Y E:active Y Y Y N Y E:focus Y Y Y Y Y E:enabled ...
- WebLogic11g-创建域(Domain)及基本配置
最近看到经常有人提问weblogic相关问题,所以闲暇之际写几篇博文(基于weblogic11),仅供大家参考. 具体weblogic的介绍以及安装,这里就不赘述了. 以域的创建开篇,虽然简单,但 ...
- Andorid使用WiFi 连接adb进行调试
无奈数据线连接常常掉线. 于是寻找wifi连接adb的方法,在github上搜索了一下client的源代码后编译后执行了下,发现能够行得通,于是记录一下. 相应的安卓client源代码在这wifi a ...
- SSH端口自定义
SSH的服务端口是22,可以定义成其他端口号, / etc/ssh/sshd_config #ssh-server配置文件位于 /etc/init.d/ssh start #重启SSH服务,