(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. python while、continue、break

    while循环实现用户登录 _user = "tom" _passwd = "abc123" counter = 0 while counter < 3: ...

  2. 集训第六周 数学概念与方法 概率 数论 最大公约数 G题

    Description There is a hill with n holes around. The holes are signed from 0 to n-1. A rabbit must h ...

  3. spark streaming 踩过的那些坑

      系统背景 spark streaming + Kafka高级API receiver 目前资源分配(现在系统比较稳定的资源分配),独立集群 --driver-memory 50G   --exec ...

  4. 括号序列(Poj1141)

    Poj1141 题目描述: 定义合法的括号序列如下: 1 空序列是一个合法的序列 2 如果S是合法的序列,则(S)和[S]也是合法的序列 3 如果A和B是合法的序列,则AB也是合法的序列 例如:下面的 ...

  5. Spring Boot - how to configure port

    https://stackoverflow.com/questions/21083170/spring-boot-how-to-configure-port

  6. Core java for impatient 笔记

    类比c++来学习! 1.在java 中变量不持有对象,变量持有的是对象的引用,可以把变量看做c++中的只能指针,自动管理内存 需要手动初始化(否则就是空指针!) 2.final 相当于c++中的con ...

  7. POJ 1769_Minimizing maximizer

    题意: 一系列m个1~n区间,每个区间固定对某个子区间进行排序,顺序选择若干区间,使最终覆盖所有区间. 分析: computes the length of the shortest subseque ...

  8. [bzoj2982]combination_卢卡斯

    Combination bzoj-2982 题目大意:求$C_n^m/%10007$. 注释:$1\le n,m\le 2\cdot 10^9$. 想法:裸卢卡斯定理. 先处理出$mod$数之内的阶乘 ...

  9. SAS编程基础 - 菜鸟入门常用操作

    1. SAS9.4添加和取消注释的快捷键? Ctrl+/:添加注释 Ctrl+Shift+/:取消注释 2. 如何强制终止程序运行? 看到那个圆圈里带叹号的图标了吗?没错,就是它 - 中断! 3. 如 ...

  10. javascript 閉包

    這兩種寫法都是可以的. 第一種: function a(){ var m=[]; for(var i=1; i<10; i++){ (function(i){ function b(){ con ...