(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自适应撑满剩下的宽度的更多相关文章

  1. 实现左边div固定宽度,右边div自适应撑满剩下的宽度的布局方式:

    html: <div class="container"> <div class="left"> left固定宽度200px </ ...

  2. 左边div固定宽度,右边div自适应撑满剩下的宽度--实现方法汇总

    神奇的事 其实有的方法(float.position.margin.flex)是有border像素的差 代码如下: <!DOCTYPE html><html><head ...

  3. css实现左边定宽右边自适应的5种方法总汇

    在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left&quo ...

  4. HTML左边盒子固定,右边盒子自适应

    html: <div class="box1"> <div class="divA">DIVA</div> <div ...

  5. CSS 左边div固定,右边div自适应

    有时候我们会有这样的需求,如图,aside是导航或者某些链接,右边的main是显示重要的内容,左边需要定宽,右边的main能够自适应剩余的宽度: <!DOCTYPE html PUBLIC &q ...

  6. css样式实现左边的固定宽度和高度的图片或者div跟随右边高度不固定的文字或者div垂直居中(文字高度超过图片,图片跟随文字居中,反之文字跟随图片居中非table实现)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 实现一个div,左边固定div宽度200px,右边div自适应

    实现一个div,左边固定div宽度200px,右边div自适应<div class= "container"> <div class="left&quo ...

  8. css网页布局 --- 左边固定,右边自适应

    div的布局统一如下: <body> <div class="wrap"> <div class="left"></d ...

  9. css 关于两栏布局,左边固定,右边自适应

    好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...

随机推荐

  1. allegro中原理图和pcb中元件的交互

    一.前言: 所谓的交互是这样的,在原理图里点击某个元件,在pcb图中就相应的被选中,这样在元器件刚导进pcb中布局放置元器件的时候可以为我们提供很大的方便. 二.前提: pcb中导入元件是这种方式: ...

  2. Spring之HelloWorld

    [Spring是什么?] 1.Spring是一个开源框架. 2.Spring为简化企业级应用开发而生,使用Spring可以使简单的JavaBean实现以前只有EJB(EJB是sun的JavaEE服务器 ...

  3. hihoCoder#1109 最小生成树三·堆优化的Prim算法

    原题地址 坑了我好久...提交总是WA,找了个AC代码,然后做同步随机数据diff测试,结果发现数据量小的时候,测试几十万组随机数据都没问题,但是数据量大了以后就会不同,思前想后就是不知道算法写得有什 ...

  4. hihoCoder#1036 Trie图

    原题地址 看了这篇博文,总算是把Trie图弄明白了 Runtime Error了无数次,一直不知道为什么,于是写了个脚本生成了一组大数据,发现果然段错误了. 调试了一下午,总算闹明白了,为什么呢? 1 ...

  5. 关于变量__name__的理解

    __name__ 1. 基本含义 如果是放在Modules模块中,就表示是模块的名字: 如果是放在Classs类中,就表示类的名字: 2. 模块中的意义 这里重点说一下模块中的意义,这个用法在pyth ...

  6. hdu_2082_找单词_201404271536

    找单词 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  7. Bad Luck Island-CodeForce(dp)

    链接:http://codeforces.com/problemset/problem/540/D 题目大意: 这个岛上有三种生物   r石头  s剪刀 p布 求最后只剩一种生物的概率 用dp[i][ ...

  8. Java File类 mkdir 不能创建多层目录,如果是多层,可以调mkdirs

    public static void createDir(String destDirName) { File dir = new File(destDirName); if (!dir.exists ...

  9. 百万级 TCP 长连接即时通讯框架 t-io

    原文:http://www.t-io.org:9292/ https://www.oschina.net/p/t-io

  10. 我的arcgis培训照片8

    来自:http://www.cioiot.com/successview-554-1.html