css 分栏高度自动相等

时间:2022-06-17 23:12:20

方法2:

<div class="ticket_table">
<div class="ticket_l">
<h3>全票</h3>
</div>
<div class="ticket_r">
<div class="item">
<span>蓬莱八仙过海景区</span><em>¥80元/人</em><a href="javascript:;">立即预订</a>
</div>
<div class="item">
<span>蓬莱三仙山风景区</span><em>¥120元/人</em><a href="javascript:;">立即预订</a>
</div>
<div class="item">
<span>蓬莱三仙山风景区</span><em>¥120元/人</em><a href="javascript:;">立即预订</a>
</div>
<div class="item">
<span>蓬莱三仙山风景区</span><em>¥120元/人</em><a href="javascript:;">立即预订</a>
</div>
</div>
</div>
.inner_article_box .ticket_price .ticket_table{width:100%;overflow:hidden;height:100%;position:relative;}
.inner_article_box .ticket_price .ticket_l{float:left;width:110px;border-left:1px solid #dbdbdb;border-top:1px solid #dbdbdb;background:#f9f9f9;overflow:hidden;height:100%;position: absolute;left:0;top: 0;}
.inner_article_box .ticket_price .ticket_l h3{width:100%;position:absolute;top:50%;font-size:20px;font-weight:bold;color:#676767;margin-top:-15px;text-align:center;}
.inner_article_box .ticket_price .ticket_r{float:right;width:646px;height:100%;border-left:1px solid #dbdbdb;border-top:1px solid #dbdbdb;}

css 分栏高度自动相等

方法1:

.inner_article_box .ticket_price .ticket_table{width:100%;overflow:hidden;height:100%;position:relative;}
.inner_article_box .ticket_price .ticket_l{float:left;width:110px;overflow:hidden;height:100%;padding-bottom:3000px;margin-bottom:-3000px;}
.inner_article_box .ticket_price .ticket_l h3{width:100%;font-size:20px;font-weight:bold;color:#676767;text-align:center;}
.inner_article_box .ticket_price .ticket_r{float:right;width:646px;height:100%;}

css 分栏高度自动相等的更多相关文章

  1. 纯CSS实现侧边栏&sol;分栏高度自动相等

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=694 一.为何要分栏高 ...

  2. 纯CSS兑现侧边栏&sol;分栏高度自动相等&lpar;转&rpar;

    这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法.核心的CSS代码如下(数值不固定): margin-bottom:-3000px; padding-bottom:3000px; 再配合父标签的 ...

  3. CSS 分栏结构

    CSS 固定左侧导航栏 left----左侧菜单 cont -- 实际内容 right  ---右侧附加内容   两栏布局---左侧高度为内容撑开的高度     方法一:[坏处是需要 float]   ...

  4. css笔记 - column分栏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. CSS3-column分栏

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. CSS实现各类分栏布局

    在CSS中,实现分栏布局有两种方法.第一种方法是使用四种CSS定位选项(absolute .static.relative和fixed)中的绝对定位(absolute positioning),它可以 ...

  7. css遮罩蒙版效果 分栏效果

    mask遮罩蒙版效果 来看一下效果图: 这是两张原图: 遮罩层图像 注意,白色区域为透明状态   要展示的图像 使用mask之后产生的效果图   首先来解释一下遮罩.蒙版.和PS中的蒙版.Flash中 ...

  8. Word中摘要和正文同时分栏后,正文跑到下一页,怎么办?或Word分栏后第一页明明有空位后面的文字却自动跳到第二页了,怎么办?

    问题1:Word中摘要和正文同时分栏后,正文跑到下一页,怎么办?或Word分栏后第一页明明有空位后面的文字却自动跳到第二页了,怎么办? 答:在word2010中,菜单栏中最左侧选“文件”->“选 ...

  9. 右边根据左边的高度自动居中只需要两行CSS就可以完成

    右边根据左边的高度自动居中只需要两行CSS就可以完成 <style type="text/css" > div{ display: inline-block; vert ...

随机推荐

  1. 模板引擎Nvelocity实例

    前言 最近一直忙于工作,没时间来管理博客,同时电脑也不给力,坏了一阵又一阵,最后还是去给修理了,这不刚一回来迫不及待的就写一篇文章来满足两个月未写博客的紧迫感. Nvelocity 关于nveloci ...

  2. ios 性能优化策略

    1.尽量不用动态高度 2.如果是动态高度的话,提前计算好即将展示的高度并使用 一定规则跟对应的对象进行绑定缓存起来以便下一次使用 3.不要在layoutSubViews 方法中对UI elements ...

  3. Sublimetext (for windows)编译运行c出现Error 2错误的解决办法

      错误描述大概如下: [Error 2]  [cmd:  [u'bash', u'-c', u"g++ 'D:\\codeblocks\\project\\test.c' -o 'D:\\ ...

  4. 高级爬虫工程师(Spider)-美团网-拉勾网-最专业的互联网招聘平台

    高级爬虫工程师(Spider)-美团网-拉勾网-最专业的互联网招聘平台 高级爬虫工程师(Spider)

  5. 小谈数据库Char、VarChar、NVarChar差异

    1. char      固定长度,最长n个字符.   2. varchar      最大长度为n的可变字符串. (n为某一整数,不同数据库,最大长度n不同)   char和varchar区别:   ...

  6. 基于LNMP的Zabbbix之Zabbix Server源码详细安装,但不给图

    Zabbix Server安装 看到那里有错或者有什么问题的话,求指点 邮箱:losbyday@163.com 上一篇PHP源码安装参见基于LNMP的Zabbbix之PHP源码安装:https://i ...

  7. BZOJ 3809&colon; Gty的二逼妹子序列 &amp&semi; 3236&colon; &lbrack;Ahoi2013&rsqb;作业 &lbrack;莫队&rsqb;

    题意: 询问区间权值在$[a,b]$范围内种类数和个数 莫队 权值分块维护种类数和个数$O(1)-O(\sqrt{N})$ #include <iostream> #include &lt ...

  8. day15--认识模块、导入模块、自执行与模块的区别

    一.认识模块 什么是模块? 模块本质是一些功能的集合体 创建的一个py文件就是一个模块 使用模块: 在使用模块的py文件中 通过  import 或者 from import导入模块 模块的优点: 可 ...

  9. Java与JavaScript 完美实现字符串拆分&lpar;利用数组存储)与合并的互逆操作

    Java: String typeStr = "1,2"; String[] typeArray = typeStr.split(","); typeStr = ...

  10. HTML中块级元素与内联元素有什么区别 ?

    块级元素:默认宽度是100%(继承自父元素),如果块对象没有采用“float:left”或“float:right;”的样式,相邻的两个块对象就会分排在不同的两行上.例如,div, p, h1, fo ...