关键词:
结构:
1 <div class="parent"> 2 <div class="left"> 3 <p>left</p> 4 </div> 5 <div class="right"> 6 <p>right</p> 7 <p>right</p> 8 </div> 9 </div>
样式:
1.解决方案一:float +margin
1 .parent { 2 background-color: grey; 3 width: 300px; 4 height: 200px; 5 6 } 7 .left { 8 float: left;/*元素脱离文档流,但是内容在文档流中*/ 9 width: 100px; 10 background-color: skyblue; 11 12 } 13 .right { 14 margin-left: 110px; 15 background-color: greenyellow; 16 } 17 /*优点:易理解 18 缺点:(1)兼容性有点问题,因为left有浮动,right没有浮动,所以right会有3px的bug,即两个right文字会想右缩3px,可在left上加margin-right:-100px;来解决,这类似于hack
(2)也因为left有浮动,right没有,所以在第一个<p>right</p>上清除浮动,right就会掉下去,即在left水平线下
.right p:first-child::before{
clear: both;
content: " ";
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
}*/
2.解决方案二:float+ margin + fix(上面方法的改进)
结构:
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right-fix"> <div class="right"> <p>right</p> <p>right</p> </div> </div> </div>
样式:
1 .parent { 2 background-color: grey; 3 width: 300px; 4 height: 200px; 5 6 } 7 .left { 8 float: left;/*元素脱离文档流,但是内容在文档流中*/ 9 width: 100px; 10 background-color: skyblue; 11 position: relative;/*提高left层级*/ 12 } 13 .right-fix { 14 float: right; 15 width: 100%; 16 margin-left: -100px; 17 } 18 .right { 19 margin-left: 110px; 20 background-color: greenyellow; 21 } 22 p { 23 margin: 0; 24 }
3.解决方案三:float+ overflow
结构是最上面的结构
样式:
.parent {
background-color: grey;
width: 300px;
height: 200px;
}
.left {
float: left;/*元素脱离文档流,但是内容在文档流中*/
width: 100px;
background-color: skyblue;
margin-right: 10px;
}
.right {
overflow: hidden;/*触发BFC模式(Block Formating context块级的格式化文本),产生的效果是:BFC模式下的容器里面的内容与外界隔离,外面的内容如:浮动元素是不会影响BFC里的内容的*/
background-color: greenyellow;
}
/*IE6不支持*/
4.解决方案四:table+table-cell (两列自然等高)
结构:最上面的结构
样式:
.parent {
background-color: grey;
width: 300px;
height: 200px;
display: table;
table-layout: fixed;/*加速table的渲染,实现布局优先*/
}
.left {
display: table-cell;
width: 100px;
background-color: skyblue;
border-right: 10px solid transparent;
background-clip: padding-box;/*设置列之间的间距*/
}
.right {
display: table-cell;
background-color: greenyellow;
}
5.解决方案五:flex+ flex:1 (两列自然等高)
结构:最上面的结构
样式:
.parent {
background-color: grey;
width: 300px;
height: 200px;
display: flex;
}
.left {
width: 100px;
background-color: skyblue;
margin-right: 10px;
}
.right {
flex: 1;/*.right适应到剩下的所有部分*/
background-color: greenyellow;
}
/*flex是css3新增的内容,兼容性低。
flex根据内容去自适应,所以性能是一个问题,通常用flex作小范围的布局,而不是大范围的布局,即right中的内容不要太复杂,太多,太多会影响flex的性能*/
css两列自适应布局的4种思路
前面的话 前面已经介绍过css两列布局中单列定宽单列自适应布局的6种思路的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式。本文将从float、table、flex和grid来介绍两列自适应布局的4种思... 查看详情
css三列布局
...前面已经介绍过单列定宽单列自适应和两列自适应的两列布局。本文介绍三列布局,分为两侧定宽中间自适应、两列定宽一侧自适应、中间定宽两侧自适应、一侧定宽两列自适应和三列自适应这五种情况 两侧定宽中间自适应... 查看详情
两列自适应布局
目的:想要在网页中实现自适应两列布局,即左边一列是固定宽度的,右边一列的宽度等于屏幕宽减去左边的宽度(或相反)。分析:需要满足三个要求:①两个盒子在同一行②右边的盒子需要占满剩下的空间③两个盒子不能重... 查看详情
前端面试题前端布局问题(代码片段)
目录单列布局 水平居中使用inline-block和text-align实现使用margin:0auto实现使用table实现使用绝对定位实现使用flex布局实现水平居中代码实现垂直居中使用vertical-align:middle使用绝对定位使用flex布局垂直居中代码实现水平垂直居中使... 查看详情
css基础知识点小计1-选择符权重优先级及两列布局中一列自适应,另一列固定宽度
1:标有!important标记的样式2:HTML编辑的样式3:用户设置的样式4:浏览器默认的样式 一列自适应,另一列固定宽度,个人认为如下方法比较好用<!DOCTYPEhtml><html><head> <title> html5 </title> <linkrel="stylesheet"... 查看详情
css布局两列布局之单列定宽,单列自适应布局思路
前言说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式。比如斗鱼的直播间,后台管理系统都是常用的我们将从float,inline-block,table,absolute,flex,grid这几个布局方式来实现这种效果float【float+margin】将定宽的一列使... 查看详情
常见的布局实现,如弹性布局,两列、三列布局
参考技术A一列固定宽度,另一列自适应宽度如下图所示:第一列固定宽度200px,第二列自适应。边上两列固定宽度,中间自适应注意html的写法,左右两列,也就是1,3列应该写在一起,中间列写在最后效果同上 查看详情
css布局,单列宽度固定,另一列自适应。
CSS布局,要求是满屏显示,分成两列显示,其中左边单列宽度固定,右边一列自适应。能根据不同的显示屏分辨率,右边一列可以占满剩下的屏幕。请问该如何设置。左边单列固定宽度,如:width:100px;height:auto;右边一列自适应... 查看详情
css---两栏三栏布局
本文主要总结了两栏布局(两列自适应、一列固定一列自适应)、三栏布局(两边固定中间自适应)的一些方法,以便遗忘时能方便查询。一、两栏布局1、两列自适应 两列自适应是特别简单的布局方式,其要点在于把... 查看详情
两列布局中单列定宽单列自适应布局的5种思路
思路一:float 说起两列布局,最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果,以及需要及时清除浮动。如果各浮动元素的高度不同时,可能会出犬牙交错的效果【1】float+margin 将定宽的... 查看详情
两列布局(代码片段)
两列布局 效果: 4.1左列定宽,右列自适应(1)利用float+margin实现html代码:<body><divid="left">左列定宽</div><divid="right">右列自适应</div></body>css代码:#leftbackground-color:#f00;float:lef 查看详情
双飞翼布局和圣杯布局解析
今天突然想起了温习一下css布局。之前看双飞翼布局只是粗略的看了一下,大概明白怎么做,但是并没有去延伸一下...还有它的孪生兄弟:圣杯布局。今天仔细的琢磨了一下;突然发现其实内容还不少的样子。双飞翼布局或者说... 查看详情
三列自适应布局(左右定宽中间自适应)
左右定中间自适应三列布局1.绝对定位 2.浮动 3.flex11.绝对定位2<!doctypehtml>3<head>4<metacharset="utf-8"/>5<title>三栏布局</title>6<styletype="text/css">7*{8margin:0;9padding:0;10}11 查看详情
两列自适应布局
两列自适应布局随便拿一个搜索引擎搜索一下“两列自适应布局”,都能得到很多种实现方法,这篇文章的重点是这些方法的底层逻辑是什么,他们是怎么得来的。分析:需要满足三个要求:①两个盒子在同一行②右边的盒子需... 查看详情
css两列布局中单列定宽单列自适应布局的6种思路
前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式。本文将从float、inline-block、table、absolute、flex和grid这六种思路来详细说明如何巧妙地实现布局float【思路一】float 说起两列布局,最常见的就... 查看详情
两列自适应布局(代码片段)
第一种写法: wxml:<viewclass="page_first"><viewclass="page_li"wx:for="4"></view></view>wxss:.page_firstpadding:30rpx;box-sizing:border-box;display:f 查看详情
布局一两列自适应布局
<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>两列自适应布局</title>   查看详情
三列自适应布局
分析了两列自适应布局的实现思路后,会觉得三列自适应布局的实现原理其实和他一模一样,不过是多了一个盒子而已。第一类,浮动在前:<divclass="left"></div><divclass="right"></div><divclass="main"></div>方法... 查看详情