左边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 ...
随机推荐
- Git分支的管理
(一)查看分支 1.查看本地分支:git branch 2.查看远程分支:git branch -r 3.查看所有分支:git branch -a (二)创建分支 1.创建本地分支:git branc ...
- 纪中21日c组T2 2117. 【2016-12-30普及组模拟】台风
2117. 台风 (File IO): input:storm.in output:storm.out 时间限制: 1000 ms 空间限制: 262144 KB 具体限制 Goto Proble ...
- c#Socket通信基本使用
基本流程 Server private void btnStart_Click(object sender, EventArgs e) { try { //当点击开始监听时在服务器端创建一个负责监视I ...
- javaScript 数据类型，变量的类型转换，typeof()可以判断变量类型
js的数据类型和常见隐式转化逻辑. 一.六种数据类型 原始类型(基本类型):按值访问,可以操作保存在变量中实际的值.原始类型汇总中null和undefined比较特殊. 引用类型:引用类型的值是保存在 ...
- mongodb4.xxx 安装，和基本配置
.社区版 下载地址 ww.mongodb.com/download-center/community .配置环境变量 安装目录下的 bin 目录 ,C:\z_MongoDB\bin:配置到系统环境变量 ...
- [USACO19DEC]Tree Depth P
题意 求逆序对为\(k\)的\(n\)排列中,生成的笛卡尔数,每个位置的深度和.\(n\le 300\) 做法 设\(f_{k}\)为\(n\)排列中逆序对为\(k\)的个数,其生成函数为:\[\pr ...
- 【spring boot】SpringBoot初学（6）– aop与自定义注解
前言 github: https://github.com/vergilyn/SpringBootDemo 一.AOP 官方demo:https://github.com/spring-project ...
- jquery click事件中的return false
提交表单数据时设定了type="submit"属性,单击提交按钮后会默认刷新页面 但是在使用jquery的click事件时没出现跳转 $('button').click(funct ...
- qt creator源码全方面分析(1)
目录介绍 首先我们对软件源代码根目录下的各个重要文件(夹)做一个简单的介绍,对整体有一个大概的了解. 下面对目录及其内容做一个大概的初步的介绍,后面我尽量按照目录顺序进行依次介绍,当然可能会有一些交叉 ...
- pillow 模块
pillow模块 图片处理 中文文档 安装 pip install Pillow 对图片旋转90度显示 from PIL import Image im=Image.open("t.jpg& ...