方法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;}

方法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实现侧边栏/分栏高度自动相等

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

  2. 纯CSS兑现侧边栏/分栏高度自动相等(转)

    这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法.核心的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. 微信小程序----map组件实现检索【定位位置】周边的POI

    效果图 实现方法 地图采用微信小程序提供的map组件: 周边的数据坐标点通过高德地图提供的API接口,获取定位位置的周边或者指定位置周边的数据. WXML <view class="m ...

  2. MongoDB · 引擎特性 · MongoDB索引原理

    MongoDB · 引擎特性 · MongoDB索引原理数据库内核月报原文链接 http://mysql.taobao.org/monthly/2018/09/06/ 为什么需要索引?当你抱怨Mong ...

  3. 用window调用kjb和ktr

    1.    运行cmd,进入kettle的目录cd C:\soft\kettle\data-integration 2.    运行start pan.bat命令 Pan—转换执行器(命令行方式),一 ...

  4. 【转】【C#】ZIP、RAR 压缩与解压缩

    压缩文件夹 源码如下 using System; using System.Data; using System.Configuration; using System.Web; using Syst ...

  5. 第二百八十二节,MySQL数据库-MySQL视图

    MySQL数据库-MySQL视图 1.视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用. 2.也 ...

  6. Zookeeper CLI

    ZooKeeper命令行界面(CLI)用于与ZooKeeper集合进行交互以进行开发.它有助于调试和解决不同的选项. 要执行ZooKeeper CLI操作,首先打开ZooKeeper服务器(“bin/ ...

  7. (转)MFC:Windows如何区分鼠标双击和两次单击

    在Windows平台上,鼠标左键的按下.松开.快速的两次点击会产生WM_LBUTTONDOWN.WM_LBUTTONUP和WM_LBUTTONDBLCLK消息,但是Windows根据什么来区分连续的两 ...

  8. 初识Comet技术

    一.服务器推送技术概述 服务器推送技术(Servers Push)的基础思想是将浏览器主动查询信息改为服务器主动发送信息.服务器发送一批数据,浏览器显示这些数据,同时保证与服务器的连接.当服务器需要再 ...

  9. 让Android 变身回一台真正的Linux系统吧!!!

    在Android上开发也有两年的时间了,虽然一直都知道Android是构建在Linux Kernel上的手机操作系统,但在此之前一直没有实感. 直到第一次买了Android的手机,并请人帮我Root后 ...

  10. Collapsing Margin:外边距叠加

    参考:http://www.smallni.com/collapsing-margin/ http://www.cnblogs.com/v10258/p/3530290.html