【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机制,这样也可以,看上去也 ...
随机推荐
- Java关键字以及一些基础解释
Java Se:Java Me 和Java Ee的基础,允许开发和部署在桌面,服务器,嵌入式环境和实时环境中使用的java程序,支持java web服务开发类 java ee:是目前java技术应用最 ...
- eclipse中如何去除警告:Class is a raw type. References to generic type Class<T> should be parameterized
转自:https://blog.csdn.net/zwr_1022/article/details/78583872 解决前的源代码: public class test {public static ...
- 怎么查看linux系统是32还是64
1.getconf LONG_BIT or getconf WORD_BIT例如:2.file /bin/ls例如: 查看linux的版本:
- C++读取XML,tinyXml的使用
前言: 最近在开发的过程中,有个需求是对xml进行格式转化,从一种格式转化到另外一种格式.因此,就需要读取xml进行处理.原本打算写成工具在linux下运行,不过后来考虑到和系统结合,最后也就使用了前 ...
- Android在Win10环境搭建
一.安装JDK并配置环境变量 1.在Java官方网站上下载相应系统的jdk文件安装,如win7 64 位系统下安装jdk-6u45-windows-x64,全部选择默认的安装路径即可安装完成. 2.配 ...
- Vue.js中，如何自己维护路由跳转记录？
在Vue的项目中,如果我们想要做返回.回退操作时,一般会调用router.go(n)这个api,但是实际操作中,使用这个api有风险,就是会让用户跳出当前应用,因为它记录的是浏览器的访问记录,而不是你 ...
- 如何运用多阶构建编写优雅的Dockerfile
导读 Kubernetes要从容器化开始,而容器又需要从Dockerfile开始,本文将介绍如何写出一个优雅的Dockerfile文件. 文章主要内容包括: Docker容器 Dockerfile 使 ...
- php UTF8 转字节数组，后使用 MD5 计算摘要
Hex.encodeHexString(md5.digest);按 UTF8 转字节数组,后使用 MD5 计算摘要,得到 16 字节数组,使用 Hex 转为长度为 32 的字符串,保持小写 bin2h ...
- 洛谷U3348 A2-回文数
U3348 A2-回文数 题目背景 方方方很喜欢回文数,于是就有了一道关于回文数的题目. 题目描述 求从小到大第n(1<=n<=10^18)个回文数. 注释:出题人认为回文数不包括0. 输 ...
- To the max(求最大子矩阵和)
To the Max Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 47985 Accepted: 25387 Desc ...