(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随笔day01

    环境变量的配置: 配置Python的安装目录到path变量中,例如C:\Python37 标识符的命名规则: 变量名只能以数字,字母,下划线组成. 不能以数字开头,保留字不能被使用. 建议使用下划线分 ...

  2. 80-Force Index,强力指标.(2015.7.1)

    Force Index 强力指标 Index,强力指标.(2015.7.1)" title="80-Force Index,强力指标.(2015.7.1)"> 观井 ...

  3. [POJ2774][codevs3160]Long Long Message

    [POJ2774][codevs3160]Long Long Message 试题描述 The little cat is majoring in physics in the capital of ...

  4. acm 一年总结

    首先是大一的一段简短历史,和其他人不太一样,刚上大一的我等于是刚刚接触电脑,开始下载程序啦,安装系统了,电脑出个小问题啦自己都不会解决,然后大一还开了一门叫做c语言的课程,顿时傻逼了,当时也不用功,大 ...

  5. [K/3Cloud] 分录行复制和新增行的冲突如何处理

    新增行:执行AfterCreateNewEntryRow,这个函数里面对一些数据进行处理(比如字段给上默认值): 复制行:复制行过程中希望这些字段能够得到我修改行信息后的数据,如果不处理,执行到Aft ...

  6. 静态区间第k大(归并树)

    POJ 2104为例 思想: 利用归并排序的思想: 建树过程和归并排序类似,每个数列都是子树序列的合并与排序. 查询过程,如果所查询区间完全包含在当前区间中,则直接返回当前区间内小于所求数的元素个数, ...

  7. JSON/xml、Processing 以及收集Java的设计模型

    JSON简介: 1.基本介绍 JSON(JavaScriptObject Notation, JS 对象简谱) 是一种轻量级的数据交换格式.它基于ECMAScript(欧洲计算机协会制定的js规范)的 ...

  8. poj 2318 TOYS &amp; poj 2398 Toy Storage (叉积)

    链接:poj 2318 题意:有一个矩形盒子,盒子里有一些木块线段.而且这些线段坐标是依照顺序给出的. 有n条线段,把盒子分层了n+1个区域,然后有m个玩具.这m个玩具的坐标是已知的,问最后每一个区域 ...

  9. 012 router password

    Press RETURN to get started!       Router>en Router#config t Enter configuration commands, one pe ...

  10. js制造运动的假象-------Day63

    这里用的这个名称可能不合适,只是临时我也没有想起比較相应的名字来,那就这样先写吧. 首先,我先表达下我想实现的是什么效果: 想必大家都玩过,至少见过非常多小游戏,例如说超级玛丽.例如说flappy b ...