【css】css2实现两列三列布局的方法
前言
对于 flex 弹性布局相信大家都有所了解，它是 css3 中的属性，然而它具有一定的兼容性问题。楼主前几天面试时遇到了面试官需要设计一个两列布局，我当然就说父元素 flex 吧哩吧啦，然而需要用基本的 css2 中的属性布局，傻掉了。。。
要求：两列布局，左边定宽，右边自适应
html 布局如下
<div id="father">
<div id="left">我是定宽左</div>
<div id="right">我是自适应右</div>
</div>
1. flex 布局
#father{
display: flex;
}
#left{
background: red;
height: 200px;
width: 200px;
}
#right{
background: green;
height: 200px;
flex:1;
}
2. css2 普通布局
<style>
#left{
background: red;
height: 200px;
width: 200px;
float:left;
}
#right{
background: green;
height: 200px;
margin-left:200px;
}
</style>
注意：
多列布局时需要将浮动元素的 html 代码写在自适应元素的前面。如以下为三列布局的代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
#div1{
width: 200px;
height: 200px;
background: red;
float:left;
}
#div2{
margin-left: 200px;
margin-right: 200px;
height: 200px;
background: green;
}
#div3{
width: 200px;
height: 200px;
background: red;
float:right;
}
</style> </head>
<body>
<div id="box">
<div id="div1">我是左定宽</div>
<div id="div3">我是中间自适应</div>
<div id="div2">我是右定宽</div>
</div>
</body>
</html>
效果如图：
【css】css2实现两列三列布局的方法的更多相关文章
- css常见双栏和三栏布局
左侧固定右侧自适应 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- css实现常用的两栏三栏布局
1.两栏 <div class="wrapper"> <div class="half left">left box <p> ...
- CSS两列及三列自适应布局方法整理
布局 自适应 两列 三列 在传统方法的基础上加入了Flex布局并阐述各方法的优缺点,希望对大家有所帮助.先上目录: 两列布局:左侧定宽,右侧自适应 方法一:利用float和负外边距 方法二:利用外边距 ...
- HTML/CSS学习之 三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化
第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...
- 三种方法实现CSS三栏布局
本文由云+社区发表 作者:前端林子 本文会分别介绍三种CSS实现三栏布局的方法,可在浏览器中打开查看效果 1.方法一:自身浮动的方法 实现方法:需要左栏向左浮动,右栏向右浮动,中间设左右margin来 ...
- CSS Grid基于网格的二维布局系统(详细教程)
.grid-wrap{ display: inline-flex; padding: 20px; background: #f4f4f4; word-break: initial; } .handle ...
- CSS常用布局方式-两列布局、三列布局
CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...
- 三列布局，读《css那些事儿》
1.两列定宽,中间自适应 要点:浮动.负边距效果.mainbox增加内容div并设置margin.:after清除浮动 原理:mainbox的浮动并将其宽度设置为100%,次要内容及侧边栏设置固定宽度 ...
- css三列布局之双飞翼pk圣杯
三列布局:两边定宽,中间自适应! 看到这个问题,我第一眼想的就是两边定宽float左右,中间加一个margin宽度自适应或者直接设一个overflow:hidden触发bfc机制,这样也可以,看上去也 ...
随机推荐
- ubuntu下mysql的安装与配置
1.安装,安装的过程中会提示你设置 MySql的"root"密码 sudo apt-get install mysql-server mysql-client 2.把 /etc/ ...
- SQL大全（1）
实用SQL语句大全 一.基础 1.创建数据库 create database 数据库名 2.删除数据库 drop database 数据库名 3.增加列 alter table 表名 add 列名 类 ...
- docker添加阿里云镜像加速器
.docker添加阿里云镜像加速器 https://blog.csdn.net/chenjin_chenjin/article/details/86674521 .配置阿里云加速器 阿里云会根据账号生 ...
- PCL中异常处理机制
博客转载自:http://www.pclcn.org/study/shownews.php?lang=cn&id=287 本节我们主要讨论PCL在编写和应用过程中如何利用PCL的异常机制,提高 ...
- 1、R-reshape2-cast
1.cast: 长型数据转宽型数据 (1).acast,dcast的区别在于输出结果.acast 输出结果为vector/matrix/array,dcast 输出结果为data.frame. ...
- UVaLive 4094 WonderTeam (贪心)
题意:有n支队伍,每两支队伍打两场比赛(主客场各一次),胜得3分,平得1分,输不得分,比赛结束之后会评选出一个梦之队, 梦之队满足以下条件:进球总数最多,胜利场数最多,丢求总数最少,三个都不能并列,求 ...
- 2013年第四届蓝桥杯国赛试题（JavaA组）
1.结果填空 (满分12分)2.结果填空 (满分15分)3.结果填空 (满分10分)4.程序设计(满分16分)5.程序设计(满分20分)6.程序设计(满分27分) 1.标题:填算式 请看下面的算式: ...
- winform防止界面卡死的三种方法
在编程过程中经常会遇到耗时操作,这个时候如果不采取一些必要的异步操作,就会导致界面的卡死,这里以winform为例子,介绍三种方法防止界面卡死,对这几个方法稍加修改同样适用于wpf,silverlig ...
- 再论c#获取存储过程返回值（包括SqlSugar）
其实这个问题好多年以前研究过: https://blog.csdn.net/xpnew/article/details/6909902 最近因为需要统计日结月结,给同事写了一套调用存储过程的代码.同时 ...
- DIV文字水平垂直居中的方法
水平居中 text-align:center 垂直居中(vertical-align) vertical-align:middle; vertical-align时而没效果 然而真实使用的时候,我们会 ...