css 分栏高度自动相等
方法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 分栏高度自动相等的更多相关文章
- 纯CSS实现侧边栏/分栏高度自动相等
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=694 一.为何要分栏高 ...
- 纯CSS兑现侧边栏/分栏高度自动相等(转)
这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法.核心的CSS代码如下(数值不固定): margin-bottom:-3000px; padding-bottom:3000px; 再配合父标签的 ...
- CSS 分栏结构
CSS 固定左侧导航栏 left----左侧菜单 cont -- 实际内容 right ---右侧附加内容 两栏布局---左侧高度为内容撑开的高度 方法一:[坏处是需要 float] ...
- css笔记 - column分栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS3-column分栏
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- CSS实现各类分栏布局
在CSS中,实现分栏布局有两种方法.第一种方法是使用四种CSS定位选项(absolute .static.relative和fixed)中的绝对定位(absolute positioning),它可以 ...
- css遮罩蒙版效果 分栏效果
mask遮罩蒙版效果 来看一下效果图: 这是两张原图: 遮罩层图像 注意,白色区域为透明状态 要展示的图像 使用mask之后产生的效果图 首先来解释一下遮罩.蒙版.和PS中的蒙版.Flash中 ...
- Word中摘要和正文同时分栏后,正文跑到下一页,怎么办?或Word分栏后第一页明明有空位后面的文字却自动跳到第二页了,怎么办?
问题1:Word中摘要和正文同时分栏后,正文跑到下一页,怎么办?或Word分栏后第一页明明有空位后面的文字却自动跳到第二页了,怎么办? 答:在word2010中,菜单栏中最左侧选“文件”->“选 ...
- 右边根据左边的高度自动居中只需要两行CSS就可以完成
右边根据左边的高度自动居中只需要两行CSS就可以完成 <style type="text/css" > div{ display: inline-block; vert ...
随机推荐
- iOS彩票项目--第六天,运用MVC思想搭建设置界面(非storyboard方法)
一.我只想说封装的思想很重要,MVC的思想也很重要,利用MVC思想搭建一下的界面 先说显示出来的cell,有三种(图中的两种,还有一种是最普通的,没有图片的),这种显示不同的cell,交给模型来处理, ...
- 解决ssh连接超时时间(ssh timeout)的设置方法
本文介绍下,linux中ssh连接超时时间的设置方法,以避免总是被强行退出.有需要的朋友,参考下吧.有关修改ssh连接超时时间的方法,网上介绍的很多了.比如下面这个:可以减少ssh连接超时等待的时间: ...
- 实现对div的显示隐藏
jQuery对div的显示和隐藏: 显示: 复制代码 代码如下:$("#id").show() 隐藏: 复制代码 代码如下: $("#id").show() j ...
- JavaScript 关键字快速匹配
来源: http://www.cnblogs.com/index-html/archive/2013/04/17/js_keyword_match.html http://www.etherdream ...
- 原生javascript星级评分
写个最简单的原生js的星级评分: <div id="rank" class="pingfen"> <ul> <li>< ...
- imx6 i2c分析
本文主要分析: 1. i2c设备注册 2. i2c驱动注册 3. 上层调用过程参考: http://www.cnblogs.com/helloworldtoyou/p/5126618.html 1. ...
- linux gzip 命令详解
减少文件大小有两个明显的好处,一是可以减少存储空间,二是通过网络传输文件时,可以减少传输的时间.gzip是在Linux系统中经常使用的一个对文件进行压缩和解压缩的命令,既方便又好用. 语法:gzip ...
- CentOS 6.5安装KVM实践
一,安装CentOS6.5,使用最小化的minimal安装二.安装完CentOS后,使用root登录配置网卡,使虚拟机可以使用外网上网 vi /etc/sysconifg/network-script ...
- PHP curl_setopt函数用法介绍补充篇
1.curl数据采集系列之单页面采集函数get_html 单页面采集在数据采集过程中是最常用的一个功能 有时在服务器访问限制的情况下 只能使用这种采集方式 慢 但是可以简单的控制 所以写好一个常用的c ...
- Spring配置文件加载流程
http://blog.csdn.net/dy_paradise/article/details/6038990