【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机制,这样也可以,看上去也 ...
随机推荐
- Happy Great BG-卡精度
Happy Great BG Time Limit: 2000ms Case Time Limit: 2000ms Memory Limit: 65536KB 64-bit integer IO ...
- 14 vue学习 postcssrc eslintrc.js babelrc
一 .postcssrc.js 众所周知为兼容所有浏览器,有的CSS属性需要对不同的浏览器加上前缀,然而有时添加一条属性,需要添加3~4条类似的属性只是为了满足浏览器的兼容,这不仅会增加许多的工作量 ...
- 1.改变项目 动态库、静态库属性。 2.使用运行库 /MD、/MT、/LD说明
/MD./MT./LD(使用运行库) 有关 C 运行库以及使用 /clr(公共语言运行时编译) 进行编译时要使用哪些库的更多信息,请参见 CRT 库功能. 传递给链接器的给定调用的所有模块都必须使用相 ...
- usb资料2
ubuntu linux下如何在启动时就关闭usb接口? https://zhidao.baidu.com/question/548651197.html Linux USB 驱动开发(四)—— 热插 ...
- Oracle tns 协议
下面是翻译国外的一篇博客,原文连接如下: https://thesprawl.org/research/oracle-tns-protocol/ 简介 TNS(Transparent Network ...
- JAVA学习笔记——（五）
今日内容介绍 1.方法基础知识 2.方法高级内容 3.方法案例 01方法的概述 * A: 为什么要有方法 * 提高代码的复用性 * B: 什么是方法 * 完成特定功能的代码块. 02方法的定义格式 * ...
- utunbu下的codeblocks配置openGL环境
真想骂娘阿,刚开始用utunbu,什么也不明白,不明白我装都软件都在哪里,不知道就像windows下的系统文件那样的文件在哪里,也不知道如何配置环境变量.就这样稀里糊涂的,还要抓紧时间装openGL, ...
- Unity ShaderLab 光照随笔
unity camera默认3种渲染路径,unity5.50里面有4种 camera Rendering Path 1 vertexLit(逐顶点,一般在vert中处理) 2 forward (前向 ...
- spring-eureka 源码解读----作为集群的eureka怎么样实现不做二次传播
在平时工作中,eureka作为一个集群时候,我们会配置多个peer ,假设当前有服务器eureka-A,eureka-B,eureka-C. 如果Eureka A的peer指向了B, B的peer指向 ...
- String常用方法简介
1. 创建String对象的常用方法 (1) String s1 = "mpptest" (2) String s2 = new String(); (3) String s3 ...