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 关于两栏布局,左边固定,右边自适应
好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...
随机推荐
- 关于使用mongodb中遇到的时间戳雷同的问题
文不对题,实际上不是时间戳,而是我们使用js取当前毫秒数,将他看为时间戳,每次updata的时候,获取当前毫秒数,把它当做create_time的默认值,自动添加到我们的数据库中,数据模型如下 开始的 ...
- 关于测试驱动的开发模式以及实战部分,建议看《Python Web开发测试驱动方法》这本书
关于测试驱动的开发模式以及实战部分,建议看<Python Web开发测试驱动方法>这本书
- Leetcode 153.寻找旋转数组中的最小值
寻找旋转数组中的最小值 假设按照升序排序的数组在预先未知的某个点上进行了旋转. ( 例如,数组 [0,1,2,4,5,6,7] 可能变为 [4,5,6,7,0,1,2] ). 请找出其中最小的元素. ...
- [Nescafé 20] 玉蟾宫
★ 输入文件:jademoon.in 输出文件:jademoon.out 简单对比 时间限制:1 s 内存限制:128 MB [背景] 有一天,小猫rainbow和freda来到了湘西 ...
- linux 文件系统 磁盘分区 格式化
1.du -sh test #查看文件或者目录的大小 2.cat file | wc -l #查看文件的行数 3.ls dirname | wc -l #查看文件个数 4.stat install.l ...
- nyoj_176_队花的烦恼二_201404262008
队花的烦恼二 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 ACM队队花C小+最近在X大OJ上做题,竟发现了一道做不出来的…水题!她快郁闷死了……也许是最近状态不太 ...
- AtCoder Grand Contest 011 E - Increasing Numbers(灵性乱搞)
题意: 当一个整数高位数字总不小于低位数字,或者说写成字符串之后单调不下降,称之为上升数.求一个整数最少能表示为多少个上升数的和.(n<=1e500000) 分析: 考虑那些不下降的数字,一定可 ...
- 2019.4.1今日一练String类中的方法
package com.pjc.objects; replaceAll()方法的理解引出正则表达式import java.util.regex.Patte ...
- 集成学习(ensemble method)--基于树模型
bagging方法(自举汇聚法 bootstrap aggregating) boosting分类:最流行的是AdaBoost(adaptive boosting) 随机森林(random fores ...
- ubuntu下vim及man帮助文档的汉化
vim是一个功能超级强大的编辑器,当然我们也可将它配置超强的IDE.这类教程网上非常多,我就不再此赘述了. 我们在使用中对不熟悉的命令,不熟悉的插件的使用方法常常须要查看文档,全英文环境确实看着人头都 ...