左边div固定宽度，右边div自适应撑满剩下的宽度--实现方法汇总
神奇的事
其实有的方法（float、position、margin、flex）是有border像素的差
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>神奇的事</title>
<style>
section {
margin: 50px 0;
}
h3 {
color: red;
text-align: center;
/*padding: 10px;*/
background: yellowgreen;
}
/*<!--------------NO.1做法(使用float)---------------->*/
.use-float .left {
float: left;
width: 12%;
border: 2px solid salmon;
}
.use-float .right {
overflow: hidden;
border: 2px solid seagreen;
}
/*<!----------------------------------------->*/
/*<!--------------NO.2做法(使用table)---------------->*/
.use-table{
border-collapse:collapse;/*合并表格*/
width:100%;
height: 25px;
border: 1px solid seagreen;
}
.use-table>tbody>tr>td:first-child{
width:100px;
height: 25px;
border: 1px solid sandybrown;
}
/*<!----------------------------------------->*/
/*<!--------------NO.3做法(使用flex)---------------->*/
.use-flex {
display: flex;
height: 25px;
}
.use-flex .flex-left {
flex:none;
width:100px;
border: 1px solid saddlebrown;
}
.use-flex .flex-right {
flex: 1;
border: 1px solid slateblue;
}
/*<!----------------------------------------->*/
/*<!--------------NO.4做法(使用margin)---------------->*/
.use-margin .tleft {
float: left;
width: 100px;
height: 25px;
border: 1px solid slategray;
}
.use-margin .tright {
margin-left: 100px;
height: 25px;
border: 1px solid saddlebrown;
}
/*<!----------------------------------------->*/
/*<!--------------NO.5做法(使用padding)---------------->*/
.use-padding .l {
float: left;
width: 100px;
height: 25px;
border: 1px solid sandybrown;
}
.use-padding .r {
padding-left: 100px;
height: 25px;
border: 1px solid slateblue;
}
/*<!----------------------------------------->*/
/*<!--------------NO.6做法(使用padding)---------------->*/
.use-to .le {
float: left;
width: 100px;
height: 25px;
border: 1px solid #000000;
}
.use-to .ri {
display: block;
height: 25px;
border: 1px solid #14B9FF;
}
/*<!----------------------------------------->*/
/*<!--------------NO.7做法(使用position)---------------->*/
.use-position{
position: relative;
}
.use-position .lef {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 25px;
border: 1px solid #dca7a7;
/*background: red;*/
}
.use-position .rig {
position: absolute;
top: 0;
left: 100px;
right: 0;
height: 25px;
border: 1px solid #64448f;
}
/*<!----------------------------------------->*/
</style>
</head>
<body>
<section>
<h3>using float</h3>
<!--<hr style="margin: 30px 0">-->
<div class="use-float">
<div class="left">left</div>
<div class="right">right</div>
</div>
</section>
<section>
<h3>using table</h3>
<!--<hr style="margin: 30px 0">-->
<table class="use-table">
<tr>
<td>left</td>
<td>right</td>
</tr>
</table>
</section>
<section>
<h3>using flex</h3>
<!--<hr style="margin: 30px 0">-->
<div class="use-flex">
<div class="flex-left">left</div>
<div class="flex-right">right</div>
</div>
</section>
<section>
<h3>using margin</h3>
<!--<hr style="margin: 20px 0">-->
<div class="use-margin">
<div class="tleft">left</div>
<div class="tright">right</div>
</div>
</section>
<section>
<h3>using padding</h3>
<!--<hr style="margin: 20px 0">-->
<div class="use-padding">
<div class="l">left</div>
<div class="r">right</div>
</div>
</section>
<section>
<h3>using disblok</h3>
<!--<hr style="margin: 20px 0">-->
<div class="use-to">
<div class="le">left</div>
<div class="ri">right</div>
</div>
</section>
<section>
<h3>using position</h3>
<!--<hr style="margin: 30px 0">-->
<div class="use-position">
<div class="lef">left</div>
<div class="rig">right</div>
</div>
<!--<hr style="margin: 30px 0">-->
</section>
</div>
</div>
</body>
</html>
*/
.use-float .left {
float: left;
width: 12%;
border: 2px solid salmon;
}
.use-float .right {
overflow: hidden;
border: 2px solid seagreen;
}
/**/
/**/
.use-table{
border-collapse:collapse;/*合并表格*/
width:100%;
height: 25px;
border: 1px solid seagreen;
}
.use-table>tbody>tr>td:first-child{
width:100px;
height: 25px;
border: 1px solid sandybrown;
}
/**/
/**/
.use-flex {
display: flex;
height: 25px;
}
.use-flex .flex-left {
flex:none;
width:100px;
border: 1px solid saddlebrown;
}
.use-flex .flex-right {
flex: 1;
border: 1px solid slateblue;
}
/**/
/**/
.use-margin .tleft {
float: left;
width: 100px;
height: 25px;
border: 1px solid slategray;
}
.use-margin .tright {
margin-left: 100px;
height: 25px;
border: 1px solid saddlebrown;
}
/**/
/**/
.use-padding .l {
float: left;
width: 100px;
height: 25px;
border: 1px solid sandybrown;
}
.use-padding .r {
padding-left: 100px;
height: 25px;
border: 1px solid slateblue;
}
/**/
/**/
.use-to .le {
float: left;
width: 100px;
height: 25px;
border: 1px solid #000000;
}
.use-to .ri {
display: block;
height: 25px;
border: 1px solid #14B9FF;
}
/**/
/**/
.use-position{
position: relative;
}
.use-position .lef {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 25px;
border: 1px solid #dca7a7;
/*background: red;*/
}
.use-position .rig {
position: absolute;
top: 0;
left: 100px;
right: 0;
height: 25px;
border: 1px solid #64448f;
}
/**/
-->
using float
using table
| left | right |
using flex
using margin
using padding
using disblok
using position
左边div固定宽度，右边div自适应撑满剩下的宽度--实现方法汇总的更多相关文章
- 实现左边div固定宽度，右边div自适应撑满剩下的宽度的布局方式：
html: <div class="container"> <div class="left"> left固定宽度200px </ ...
- css实现左边div固定宽度，右边div自适应撑满剩下的宽度
(1)使用float <div class="use-float"> <div></div> <div></div> & ...
- HTML左边盒子固定,右边盒子自适应
html: <div class="box1"> <div class="divA">DIVA</div> <div ...
- css实现左边定宽右边自适应的5种方法总汇
在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left&quo ...
- 实现一个div，左边固定div宽度200px，右边div自适应
实现一个div,左边固定div宽度200px,右边div自适应<div class= "container"> <div class="left&quo ...
- 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/ ...
- 基于Ajax+div的“左边菜单、右边内容”页面效果实现
效果演示: ①默认页面(index.jsp): ②:点击左侧 用户管理 标签下的 用户列表 选项后,右边默认页面内容更新为用户列表页(userList.jsp)的内容 : ③:同理,点击 产品管理.订 ...
- css怎么设置2个div同行，第一个固定宽度，第二个占满剩余的部分
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- JavaScript-其他设计模式
其他设计模式 JavaScript 中不常用 对应不到经典场景 原型模式-行为型 clone 自己,生成一个新对象 java 默认有 clone 接口,不用自己实现 //'object.creat'用 ...
- 初窥ECharts
近来趁着空闲时间了解了一下 ECharts.也顺带记录一番. 首先要从下载ECharts库,这个从官网可以直接下载. 引入ECharts.JS <head> <meta charse ...
- JavaScript之BOM基础
BOM(Browser Object Model)也叫浏览器对象,它提供了很多对象,用于访问浏览器的功能.但是BOM是没有标准的,每一个浏览器厂家会根据自己的需求来扩展BOM对象.本文主要以一些简单的 ...
- 【原创】关于pyinstaller打包的程序执行出错问题,pyinstaller3.5只支持matplotlib3.0.2已经解决
之前,在用pyinstaller打包一个python程序时没有问题,后来不知道什么原因,再打包时出现了所谓的pyinstaller打包报错: RecursionError: maximum recur ...
- Vue中data元素之间相互赋值的陷阱
今天在整理代码时,遇到这样的一个场景,下面将结合示例说明: (一)在Vue文件中定义一个const常量,如下图所示: (二)在data中有三个元素是这样赋值的,如下图所示: (三)在created() ...
- WebDev.WebServer20.exe应用程序错误
我的.net网页,在iis运行成功,在VS2010调试网页时报一个WebDev.WebServer20.exe应用程序错误. 最后查找资料,发现了网站设置的框架是2.0,在vs2010里不能调试2.0 ...
- 利用Python读取CSV文件并计算某一列的均值和方差
近日需要对excel的csv文件进行处理,求取某银行历年股价的均值方差等一系列数据 文件的构成很简单,部分如下所示 总共有接近七千行数据,主要的工作就是将其中的股价数据提取出来,放入一个数组之中,然后 ...
- 基于光盘配置yum源
#开启自动挂载服务 systemctl start autofs #设置开机自动挂载 systemctl enable autofs #光盘自动挂载路径/misc/cd “包含repoda ...
- java Graphics2D绘制文字 本地正常服务器乱码问题
先贴关键代码: 用Graphics2D画文字到图片,再生成图片文件,在本地运行正常,一部署到服务器就不正常,变成了正方框如下图 解决问题思路: 1.部署服务器的编码问题. 2.代码问题. 以上两点一直 ...
- JavaSE学习笔记（9）---集合类和泛型
JavaSE学习笔记(9)---集合类和泛型 1.Collection集合 集合概述 在前面我们已经学习过并使用过集合ArrayList<E> ,那么集合到底是什么呢? 集合:集合是jav ...