【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机制,这样也可以,看上去也 ...
随机推荐
- LED接口
通常我们都听到别人说DVI接口.VGA接口等,可是这些接口是什么意思,led显示屏厂家小编为您解析其含义与不同之处. 1.DVI接口 DVI接口相校于VGA.HDMI.DP等接口来说体积较大,是目 ...
- 云-资讯-Micron-Insight：云的形成方式 — 以及它的发展方向
ylbtech-云-资讯-Micron-Insight:云的形成方式 — 以及它的发展方向 1.返回顶部 1. 云的形成方式 — 以及它的发展方向 当你坐下来开始一天工作的时候,你可能不会考虑到你所做 ...
- MFC ListBox 设置水平长度
在*.rc资源 设置可以水平滚动, 垂直滚动 但是 水平滚动无效,水平方向 一直无法显示 完整 设置代码如下 m_listBox.SetHorizontalExtent(2000); m_listBo ...
- warning: conflicting types for built-in function 'puts'
warning: conflicting types for built-in function 'puts' [编译器版本] arm-linux-gcc 3.4.1 [问题描述] 在做嵌入式底层开发 ...
- js取得数组重复元素
function duplicates(arr) { var result=[]; arr.sort();//进行排序,重复的都相邻了 ;i<arr.length;i++){ ]&&am ...
- 性能测试之Jmeter学习（八）
本节主要学习:断言 JMeter也有像LR中的检查点,本节就来介绍下JMeter的检查点如何去实现. JMeter里面的检查点通过添加断言来完成. 检查点:上一节讲到,我们对用户名和密码进行了参数化, ...
- java的try后面跟括号
例子: try (FileReader reader = new FileReader("data.txt")) { ... }catch (IOException io) { . ...
- 了解protected 以及公用、私有和受保护的继承
protected成员 可以认为protected访问标号是private 和public 的混合: 1.像private成员一样,protected成员不能被类的用户访问. 2.像public成员一 ...
- 后缀数组dc3算法模版（待补）
模版: ; #define F(x) ((x)/3+((x)%3==1?0:tb)) #define G(x) ((x)<tb?(x)*3+1:((x)-tb)*3+2) int wa[maxn ...
- Halcon 和 C# 联合编程 - 如何使用开源项目 ViewROI
声明 HWndCtrl _viewCtrl; ROIController _roiCtrl; 初始化 _viewCtrl = new HWndCtrl(hWindowControl); _roiCtr ...