css两列等高,css多列等高布局

多列等高布局，算是比较常见的一种布局，要求两列布局看上去高度一致(就是通常是两列背景色一致)。

多列等高布局,使用(display:flex) 实现。多列等高布局,使用(display:flex) 实现。多列等高布局,使用(display:flex) 实现。多列等高布局,使用(display:flex) 实现。

多列等高布局

使用display:flex的方式实现#container{

width:400px;

margin:0 auto;

background-color: #ddd;

overflow:hidden;

display:flex;

}

.left,

.right{

width:200px;

font-size: 16px;

line-height:24px;

color:#333;

}

.left{

background-color: deeppink;

}

.right{

background-color:yellowgreen;

}

拥抱Flexbox弹性布局基本概念之Flex容器一文中强调：侧轴Flex项目默认是align-items：stretch。如果Flex项目有尺寸属性(min-width / max-width / width / min-height / max-height / height)，那么首先应用这些尺寸属性。即(left、right)Flex项目不要写高度等。

使用正负margin与padding相冲的方式实现#container{

width:400px;

margin:0 auto;

background:#eee;

overflow:hidden;

}

.left,

.right{

width:200px;

float:left;

font-size: 16px;

line-height:24px;

color:#333;

padding-bottom:5000px;

margin-bottom:-5000px;

}

.left{

background-color: deeppink;

}

.right{

background-color:yellowgreen;

}

父容器线性渐变多重背景色

#container{

width:400px;

margin:0 auto;

background-image:

linear-gradient(90deg, yellowgreen 50%, deeppink 0);

overflow:hidden;

}

.left,

.right{

width:200px;

float:left;

font-size: 16px;

line-height:24px;

color:#333;

}

display:table-cell实现

多列等高布局,使用 display:table-cell 的方式实现。多列等高布局,使用 display:table-cell 的方式实现。多列等高布局,使用 display:table-cell 的方式实现。

多列等高布局

#container{

width:400px;

margin:0 auto;

background:#eee;

overflow:hidden;

display:table;

}

.left,

.right{

display:table-cell;

width:200px;

font-size: 16px;

line-height:24px;

color:#333;

}

.left{

background-color: deeppink;

}

.right{

background-color:yellowgreen;

}

css两列等高,css多列等高布局相关推荐

css 两个元素重叠,css元素如何重叠？
css元素重叠的方法:1.给元素设置负margin,负margin可以让元素的占用空间变小,后面的元素可以覆盖当前的元素:2.使用position属性,利用相对定位和绝对定位来让多个元素进行重叠. 本 ...
css两种颜色叠加,css的叠加颜色
这次给大家造就css的可视颜色,采用css叠加颜色的注意事项有哪些,下面就是实战经验案例,一起来看一下.background: -o-linear-gradient(left, #109afd, #3 ...
CSS两列高度自适应，右边自适应
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
css html 字竖,CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现？
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
html溢出宽度控制,html - 具有固定宽度列的HTML / CSS表（如果内容溢出，则滚动） - 堆栈内存溢出...
我有一个带有一个或多个固定宽度列的HTML表. 有时,此类列的内容超出了列的宽度,我想在表格列的底部使用一个滚动条. 我想保持相同的语义HTML结构,并且没有重复的表或多次迭代. 我想要尽可能少的Ja ...
html div如何列对其,CSS:自适应N列布局如何解决两端对齐
关于每行N列的这种布局,存在一个两端对齐的问题,因为每一列都会存在一个margin-left或者margin-right,导致最后一个超出父元素的边界. 通过一番努力,终于解决了这个遗留很久的问题,废 ...
css grid设置宽度,如何设置Grid Layout （网格布局）列的最小宽度
如何设置Grid Layout (网格布局)列的最小宽度?设置网格的列最小宽度时,在网格的列宽设置部分中使用minmax()函数,下面我们就来看具体的内容. 我们先来看一下minmax()函数的格式m ...
CSS 两栏布局之总体设计
随意打开一个 word 文档一看,其布局便一目了然.它分为左.右两栏,左栏为文档的目录树,右栏为文档的内容.而内容区又被分为页眉.正文和页脚三个部分. 这里跟现实版的 word 保持一致,也采用相同的 ...
vue列表项吸顶 js+css两种骚操作
demo需求:vue项目中,在列表里,滑动到哪个日期的时候,哪个日期就吸顶显示: js方法: 用js的方法思路:获取每一项item的底部距离顶部的高度,把所有的高度放在一个数组里面,在去循环比对,在使 ...
html如何设定盒子的高,css 高度height设置
css height[css 高度]教程 height翻译成中文也是高.高度意思.在CSS样式中高度样式设置也是height来布局.几乎每个网页布局都会用到css高度height样式,特别是布局局部时 ...

css两列等高,css多列等高布局

css两列等高,css多列等高布局相关推荐

最新文章

热门文章