(1)使用float

  1. <div class="use-float">
  2. <div></div>
  3. <div></div>
  4. </div>
  1. .use-float>div:first-child{
  2. width:100px;
  3. float:left;
  4. }
  5. .use-float>div:last-child{
  6. overflow:hidden;
  7. }

------------------------------------------------------------------------------------------------------------------------------

(2)使用table

  1. <table class="use-table">
  2. <tr>
  3. <td></td>
  4. <td></td>
  5. </tr>
  6. </table>
  1. .use-table{
  2. border-collapse:collapse;
  3. width:100%;
  4. }
  5. .use-table>tbody>tr>td:first-child{
  6. width:100px;
  7. }

-----------------------------------------------------------------------------------------------------------------------------

(3)用div模拟table

  1. <div class="use-mock-table">
  2. <div></div>
  3. <div></div>
  4. </div>
  1. .use-mock-table{
  2. display:table;
  3. width:100%;
  4. }
  5. .use-mock-table>div{
  6. display:table-cell;
  7. }
  8. .use-mock-table>div:first-child{
  9. width:100px;
  10. }

-----------------------------------------------------------------------------------------------------------------------------

(4)使用flex

  1. <div class="use-flex">
  2. <div></div>
  3. <div></div>
  4. </div>
  1. .use-flex{
  2. display:flex;
  3. }
  4. .use-flex>div:first-child{
  5. flex:none;
  6. width:100px;
  7. }
  8. .use-flex>div:last-child{
  9. flex:;
  10. }

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. Spring AOP配置简单记录(注解及xml配置方式)

    在了解spring aop中的关键字(如:连接点(JoinPoint).切入点(PointCut).切面(Aspact).织入(Weaving).通知(Advice).目标(Target)等)后进行了 ...

  2. hadoop_exporter python版本的安装使用

    1.需要使用python pip 参考https://www.cnblogs.com/rain124/p/6196053.html python2.7.5 安装pip 1 先安装setuptools ...

  3. nativeLibraryDirectories=[/data/app/com.lukouapp-1/lib/arm64, /vendor/lib64, /system/lib64]]] couldn't find "libxxxx.so

    一开始我遇到的问题是,如果手机有SD卡槽,则不管有没有插卡,都会闪退,打日记后发现是找不到so文件.报错日记如下: nativeLibraryDirectories=[/data/app/com.lu ...

  4. HDU 5458 Stability

    Stability Time Limit: 2000ms Memory Limit: 102400KB This problem will be judged on HDU. Original ID: ...

  5. noip模拟赛 少女

    分析:每个连通块都是独立的,对一个连通块进行分析.如果边数>点数,显然是不可能的,因为每条边要分配给一个点,至少有一个点分配了两次以上.如果边数=点数,就形成了环,有两种方案,顺时针一个环,逆时 ...

  6. EasyUI单击行数据时动态编写editor

    $.extend($.fn.treegrid.methods, { addEditor: function (jq, param) { if (param instanceof Array) { $. ...

  7. PatentTips - Universal RAID Class Driver

    BACKGROUND OF THE INVENTION The present invention relates to the field of data storage devices. Comp ...

  8. Linux下汇编语言学习笔记7 ---

    这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...

  9. hdu - 3549 Flow Problem (最大流模板题)

    http://acm.hdu.edu.cn/showproblem.php?pid=3549 Ford-Fulkerson算法. #include <iostream> #include ...

  10. Codeforces 645A Amity Assessment【八数码】

    题目链接: http://codeforces.com/problemset/problem/645/A 题意: 2*2的八数码问题 分析: 这题n为2,不需要搜索,直接判断字母排列顺序就好了. 注意 ...