(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. jquery点击事件

    $("#hoetelNameSelect").click( $.post("${ctx}/meeting/restaurant/queryHotelName", ...

  2. 【BZOJ 1003】[ZJOI2006]物流运输(Dijkstra+DP)

    题链 http://www.lydsy.com/JudgeOnline/problem.php?id=1003 Description 物流公司要把一批货物从码头A运到码头B.由于货物量比较大,需要n ...

  3. 关于.NET玩爬虫这些事 【初码干货】

    这几天在微信群里又聊到.NET可以救中国但是案例太少不深的问题,我说.NET玩爬虫简直就是宇宙第一,于是大神朱永光说,你为何不来写一篇总结一下? 那么今天就全面的来总结一下,在.NET生态下,如何玩爬 ...

  4. MBP 2018 & Mac keyboard shortcuts

    MBP 2018 & Mac keyboard shortcuts https://support.apple.com/en-us/HT201236 delete key === Contro ...

  5. 【NOIP2017练习】跳跃切除子序列(模拟)

    题意: 思路: 已放弃 #include <bits/stdc++.h> typedef long long LL; int main(){ int T; scanf("%d&q ...

  6. POJ 2186 tarjan+缩点 基础题

    Popular Cows Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 37111   Accepted: 15124 De ...

  7. Codeforces 651E Table Compression【并查集】

    题目链接: http://codeforces.com/problemset/problem/650/C 题意: 给定n*m的矩阵,要求用最小的数表示每个元素,其中各行各列的大小关系保持不变. 分析: ...

  8. list去掉重复元素

    需求: 有list 里面含有重复元素,要求去掉重复元素: solution 1: >>> a [1, 2, 2, 1, 3, 4, 5, 6, 5] >>> set ...

  9. Spring Boot为我们准备了最佳的数据库连接池方案,只需要在属性文件(例如application.properties)中配置需要的连接池参数即可。

    Spring Boot为我们准备了最佳的数据库连接池方案,只需要在属性文件(例如application.properties)中配置需要的连接池参数即可.

  10. 当遇到Mac的Excel或者Word老是重复崩溃的时候

    打开Number,新建文件然后导出为Excel.之后再用Excel打开,一切都OK了.