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 关于两栏布局,左边固定,右边自适应
好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...
随机推荐
- allegro中原理图和pcb中元件的交互
一.前言: 所谓的交互是这样的,在原理图里点击某个元件,在pcb图中就相应的被选中,这样在元器件刚导进pcb中布局放置元器件的时候可以为我们提供很大的方便. 二.前提: pcb中导入元件是这种方式: ...
- Spring之HelloWorld
[Spring是什么?] 1.Spring是一个开源框架. 2.Spring为简化企业级应用开发而生,使用Spring可以使简单的JavaBean实现以前只有EJB(EJB是sun的JavaEE服务器 ...
- hihoCoder#1109 最小生成树三·堆优化的Prim算法
原题地址 坑了我好久...提交总是WA,找了个AC代码,然后做同步随机数据diff测试,结果发现数据量小的时候,测试几十万组随机数据都没问题,但是数据量大了以后就会不同,思前想后就是不知道算法写得有什 ...
- hihoCoder#1036 Trie图
原题地址 看了这篇博文,总算是把Trie图弄明白了 Runtime Error了无数次,一直不知道为什么,于是写了个脚本生成了一组大数据,发现果然段错误了. 调试了一下午,总算闹明白了,为什么呢? 1 ...
- 关于变量__name__的理解
__name__ 1. 基本含义 如果是放在Modules模块中,就表示是模块的名字: 如果是放在Classs类中,就表示类的名字: 2. 模块中的意义 这里重点说一下模块中的意义,这个用法在pyth ...
- hdu_2082_找单词_201404271536
找单词 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- Bad Luck Island-CodeForce(dp)
链接:http://codeforces.com/problemset/problem/540/D 题目大意: 这个岛上有三种生物 r石头 s剪刀 p布 求最后只剩一种生物的概率 用dp[i][ ...
- Java File类 mkdir 不能创建多层目录,如果是多层,可以调mkdirs
public static void createDir(String destDirName) { File dir = new File(destDirName); if (!dir.exists ...
- 百万级 TCP 长连接即时通讯框架 t-io
原文:http://www.t-io.org:9292/ https://www.oschina.net/p/t-io
- 我的arcgis培训照片8
来自:http://www.cioiot.com/successview-554-1.html