【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机制,这样也可以,看上去也 ...
随机推荐
- fabric添加多主机ssh互信
最近折腾fabric,把服务器ssh互信用fabric写了一遍,单向互信,master可以无密码访问client,具体如下: 执行:fab -f ./copyrsa.py allsshkey 即可, ...
- HDU-5980
Find Small A Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Tota ...
- # program once 用途 及与 ifndef使用异同
在头文件中用这种写法就是为了该头文件被重复包含时不会出现符合重定义的错误. 效果等同于 #ifndef __xxx__ #define __xxx__ ... #endi ...
- POJ - 3268 Silver Cow Party SPFA+SLF优化 单源起点终点最短路
Silver Cow Party One cow from each of N farms (1 ≤ N ≤ 1000) conveniently numbered 1..N is going to ...
- C++ - main()函数参数
main()函数及其参数说明 main()函数主要形式: int main(void) int main(int argc, char *argv[]) = int main(int argc, ch ...
- Linux运用一些常用命令
今天搜集整理了一些Linux服务器运维常用命令,希望对大家有帮助:1.删除0字节文件 find -type f -size 0 -exec rm -rf {} 2.查看进程按内存从大到小排列 ps - ...
- solidity 学习笔记（7）内联汇编
为什么要有内联汇编? //普通循环和内敛汇编循环比较 pragma solidity ^0.4.25; contract Assembly{ function nativeLoop() public ...
- 洛谷 P1434 [SHOI2002]滑雪 解题报告
这题方法有很多, 这里介绍2种: 方法1 很容易想到搜索, bfs或dfs应该都可以, 就不放代码了: 方法2 这题还可以用 dp 来做. 做法:先将每个点按照高度从小到大排序,因为大的点只能向小的点 ...
- VMware workstation 14 安装 iOS虚拟机
https://03k.org/vmware-macos.html https://jingyan.baidu.com/article/363872ec206a356e4ba16f30.html 1. ...
- php追加数组的问题
PHP数组合并两种方法及区别 如果是关联数组,如下: 代码如下: $a = array( 'where' => 'uid=1', 'order' => 'uid', ); $b = arr ...