2.布局解决方案 一列定宽+一列自适应<4>
时间:2022-06-09
本文章向大家介绍2.布局解决方案 一列定宽+一列自适应<4>,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
第一种方案 float+margin(有bug)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body,p{
margin: 0;
padding: 0;
}
.left{
background: yellowgreen;
float: left;
width: 100px;
}
.right{
background: pink;
margin-left:120px;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
</body>
</html>
第一种方案进阶版
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body,p{
margin: 0;
padding: 0;
}
.left{
background: yellowgreen;
float: left;
width: 100px;
}
.right-con{
float: left;
width: 100%;
margin-left: -100px;
}
.right{
background: pink;
margin-left: 120px;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right-con">
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
</div>
</body>
</html>
第二种方案 margin+overflow
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body,p{
margin: 0;
padding: 0;
}
.left{
background: yellowgreen;
float: left;
width: 100px;
}
.right{
margin-left: 120px;
background: pink;
overflow: hidden;
/*不被浮动影响*/
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
</body>
</html>
第三种方案 display:table
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body,p{
margin: 0;
padding: 0;
}
.parent{
display: table;
width: 100%;
}
.left{
display: table-cell;
width: 100px;
padding-right: 20px;
}
.left p{
background: yellowgreen;
}
.right{
background: pink;
display: table-cell;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
</body>
</html>
第四种方案 display:flex
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body,p{
margin: 0;
padding: 0;
}
.parent{
display: flex;
}
.left{
background: yellowgreen;
width: 100px;
}
.right{
background: pink;
flex: 1;
margin-left: 20px;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
</body>
</html>
- Single Page Application概览
- HashSet集合中hashCode及equals方法详解
- 企鹅智造企业发展论坛:共话小程序生态下的企业营销
- MySQL(十六)之MySQL用户管理
- JavaScript中this关键字使用
- thrift:swift项目笔记
- Java常用类(五)之集合工具类Collections
- Windows8小技巧(1)—Map Network Drive
- mysql: Illegal mix of collations (utf8_unicode_ci,IMPLICIT) and (utf8_general_ci,IMPLICIT) for opera
- tomcat 8.5.9.0 解决catalina.out过大的问题
- 物联网是如何驱动网络变革的?——上
- Java常用类(四)之数组工具类Arrays
- java.lang.NoSuchMethodError: javax.servlet.http.HttpServletRequest.isAsyncStarted()Z 的解决
- JS魔法堂:定义页面的Dispose方法——[before]unload事件启示录
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- LeetCode81|移动零
- LeetCode80|反转字符串中的元音字母
- LeetCode79|平方数之和
- LeetCode91|寻找重复数
- LeetCode90|两个数组的交集
- LeetCode89|在排序数组中查找数字I
- LeetCode88|两数之和IV-输入BST
- LeetCode98|判定字符是否唯一
- LeetCode97|合并两个有序链表
- LeetCode99|数组中出现次数超过一半的数字
- redis源码之hash结构的实现
- redis源码之set结构
- redis源码之zset结构的实现
- Elasticsearch: range 数据类型及基于range的聚合 (7.4发行版新功能)
- 漫画:如何在数组中找到和为 “特定值” 的三个数?