左边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 ...
随机推荐
- RabbitMQ工作模式
------------恢复内容开始------------ RabbitMQ基本概念: Producer:生产者(消息的提供者) Consumer:消费者(消息的使用者) Message:消息(程序 ...
- wow.js wow.min.js animate.css animate.min.css
奉献给下载不到源码的小伙伴,下载到的请忽视 wow.js (function() { var MutationObserver, Util, WeakMap, getComputedStyle, ge ...
- 常见CSS3选择器和文本字体样式汇总
常见的CSS3选择器包含:常用基本.属性.伪类.层级(组合)选择器,具体使用情况建议先阅读css选择器四大类:基本.组合.属性.伪类对于选择器的使用有一个基本了解,选择器的作用在于通过它找到元素,并且 ...
- ORACLE中如何找出大表分布在哪些数据文件中？
ORACLE中如何找出大表分布在哪些数据文件中? 在ORACLE数据中,我们能否找出一个大表的段对象分布在哪些数据文件中呢? 答案是可以,我们可以用下面脚本来找出对应表的区.段分别位于哪些数据文件 ...
- 表关联使用INNER JOIN实现更新功能
准备一些数据,创建2张表,表1为学生表: CREATE TABLE [dbo].[Student] ( [SNO] INT NOT NULL PRIMARY KEY, ) NOT NULL, ,) N ...
- LOJ #2877. 「JOISC 2014 Day2」交朋友 并查集+BFS
这种图论问题都挺考验小思维的. 首先,我们把从 $x$ 连出去两条边的都合并了. 然后再去合并从 $x$ 连出去一条原有边与一条新边的情况. 第一种情况直接枚举就行,第二种情况来一个多源 bfs 即可 ...
- opencv —— Sobel 一阶导数算子、Scharr 滤波器 一阶导数用于边缘检测
sobel 算子的基本概念 sobel 算子是一个主要用于边缘检测的离散微分算子,它结合了高斯平滑和微分求导,用于计算图像灰度函数的近似梯度. 其基础来自于一个事实,即在边缘部分,像素值出现“跳跃”或 ...
- vuex目录配置
vuex目录配置,即vue-cli开发时目录配置 项目结构 Vuex 并不限制你的代码结构.但是,它规定了一些需要遵守的规则: 应用层级的状态应该集中到单个 store 对象中. 提交 mutatio ...
- 让我们纯手写一个js继承吧
继承在前端逻辑操作中是比较常见的,今天我们就从零开始写一个js的继承方式 在es5中继承实质上是先创建子类的实例对象,然后再将父类的方法添加到this上Parent.call(this),在es6中则 ...
- 纪中12日T1 2307. 选择
2307. 选择 (File IO): input:choose.in output:choose.out 时间限制: 1000 ms 空间限制: 262144 KB 具体限制 Goto Pr ...