如何实现两列等高效果？

先看下面的效果图：

难点：

里面内容不确定，不能定高的同时要让左右两个div的高度保持一致。

解决方案：

利用 display:table 和 display:table-cell。因为display:table之后对margin不敏感，所以如果要调整两者之间的间距，需要用到border-spacing。

具体代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>利用display:table实现两列等高</title><style type="text/css">.service-list-block{margin-top: 15px;width: 600px;}.service-list-block .service-item-wrap{padding: 0 15px;display: table;table-layout: fixed;width: 100%;box-sizing: border-box;border-spacing: 20px;}.service-list-block .service-item-wrap>li{display: table-cell;border: 1px solid #e6e6e6;}    .service-item-detail{padding: 15px;}    </style></head><body><h3>两列等高</h3><div class="service-list-block"><ul class="tc service-item-wrap"><li><div class="service-item"><div class="service-item-detail"><ol><li>免费注册机构账户</li><li>免费授权绑定公众号</li><li>免费拥有微官网搭建</li><li>免费使用基础工具</li><li>营销利器试用半个月</li></ol></div></div></li><li><div class="service-item"><div class="service-item-detail"><ol><li>机构微商城系统</li><li>营销利器插件包</li></ol></div></div></li></ul></div></body>
</html>

如何实现两列等高效果？相关推荐

任意列+左右两列等高布局，并要求有最小高度
高度相等列在Web页面设计中永远是一个网页设计师的需求.如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可以了.但是,如果一个或多个列需要单独设置 ...
两列布局、三列适应布局、两列等高适应布局。
一. 两列布局:左侧定宽.右侧自适应. 四种方法 :flex .position.float和负外边距.外边距 1. 使用flex. <!DOCTYPE html> <html> ...
tabe-cell实现两栏等高效果
tabe-cell实现两栏等高效果 <div id = "container" style = "display:table;width:100%"> ...
css两列等高,css 多列等高
多列等高高度不一的列以等高方式布局. 需求设计师说某页面的新闻介绍,由于新闻内容不同导致显示区域的高度不一致,现需要使其高度视觉上保持一致.小加同学觉得必须迅速解决,让设计师妹妹知道我们程序师哥哥 ...
css那些事儿2 经典两列布局
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <link rel=& ...
flex vue 垂直居中居上_flex 垂直居中、两列对齐、自适应宽
flex 垂直居中 #parent { display:flex; width:300px; height:300px; outline:solid 1px; justify-content:cent ...
实现两（三）列等高布局的方法
第一种方法: <style type="text/css"> *{margin: 0; padding: 0;} #wrap{ padd ...
表格边框样式设置，实现两列变成伪一列；灰白相间效果设置
将表格border设置为0得到以下样式,可以看到两列中有明显白条解决办法:table中加入border-collapse: collapse;将边框合并灰白相间效果:设置单行为灰色 table t ...
点击改变div高度_css实现div两列布局（两种方法）
一.应用场景左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应二.思路首先把这个问题分步解决,需要攻克以下两点: 1.让两个div并排到一行 2.让一个div宽度固定,另个div占 ...

如何实现两列等高效果？

如何实现两列等高效果？相关推荐

最新文章

热门文章