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:1;
}

转载于:https://www.cnblogs.com/watermelonban/p/7668197.html

css实现左边div固定宽度，右边div自适应撑满剩下的宽度相关推荐

css之左边div固定宽度右边div自适应布局
为什么80%的码农都做不了架构师?>>> 0.要实现的布局的效果图是这样子的: a)外边有个大的div背景为粉红色,包住里面的div,宽度自适应,高度根据里面两个div高度最大 ...
css解决uniapp使用image标签图片无法撑满全屏问题
css解决uniapp使用image标签图片无法撑满全屏问题文章目录 css解决uniapp使用image标签图片无法撑满全屏问题前言一.问题还原二.问题解决 1.在解决问题之前有必要先来学习 ...
css 实现右边div高度随着左边div内容的增加，右边div的高度也增加（左边div与右边div高度保持一致）
从ajax传回来的数据左边撑开了比较多,右边的数据默认显示在下方,添加css更改位置 <template><div class="indexOne">< ...
布局（左边的div随着右边div的高度变化而变化）
今天同学问了一个左边div的高度随着右边div的高度变化而变化的问题.开始想了想有点蒙.中间试着用height:100%:试过发现并不可行,因为高度百分比必须有确切的祖先元素(即设置了px)才可以.由 ...
html下拉菜单会影响下一行,CSS下拉菜单导致后续内容无法撑满页面
问题描述初学CSS,打算做一个下拉菜单.目标结果是: "下拉菜单"那个显示的就是一个下拉菜单. 但是如果在CSS中把下拉菜单周围的border去掉,内容部分就无法占满整行: 问题 ...
css 剩余空间,CSS DIV高度撑满剩余空间
页面高度为百分百情况下,内容div实现自动撑满剩下的位置头部区域高度为110rpx,内容区域div实现自动撑满剩下的位置. 如果将div 高度设置为100%,会造成多出头部的110rpx,会有滚动条显 ...
flex布局实现左边图片与右边文字同等高
问题:一般页面布局的时候我们遇到很多需要左边图片与右边文字自适应但是不同等高的情况,很头疼,其实用flex布局一句话就能搞定了 align-self: stretch;:该弹性项被拉伸以适应容器高度 ...
html div左中右布局,求助css。一个div包含两个div，左右布局，左边css宽30%，右边div宽70%。高度均自...
求助css. 一个div包含两个div,左右布局,左边css宽30%,右边div宽70%.高度均自以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让 ...
[css] 在固定宽度的div下，怎么让字体自适应大小，不超出宽度，也不要换行
[css] 在固定宽度的div下,怎么让字体自适应大小,不超出宽度,也不要换行 .item-codes{width:800px;word-break: break-all;white-space: n ...

css实现左边div固定宽度，右边div自适应撑满剩下的宽度

css实现左边div固定宽度，右边div自适应撑满剩下的宽度相关推荐

最新文章

热门文章