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 ...
随机推荐
- c#生成rsa公钥和私钥
c#生成rsa公钥和私钥的类库,包括加密解密,可以用在网站和winform项目 源码地址: http://download.csdn.net/detail/jine515073/8383809
- 检查 Linux 服务器性能
如何用十条命令在一分钟内检查 Linux 服务器性能 如果你的Linux服务器突然负载暴增,报警短信快发爆你的手机,如何在最短时间内找出Linux性能问题所在?来看Netflix性能工程团队的这篇博文 ...
- ftp 长传报错553 可能是选的目录不对
ftp> put /root/20180711tmp.txt /cc.txt local: /root/20180711tmp.txt remote: /cc.txt 200 PORT comm ...
- 设计中最常用的CSS选择器
准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选择器有以下五类: 一.标签 ...
- absolute绝对定位的非绝对定位用法
总结: position为absolute的元素如果没有设置left, top等值与left:0;top:0;的的效果是不一样的.例如一个div中有个absolute属性元素,其没有left或是top ...
- thinkphp 第一个设计总结
1.thinkphp的无限级分类不是万能的... 2.感觉先看前台(根据前台设计数据库)后写控制代码(后台),速度或许会快一点,思路明确...
- IntelliJ IDEA 14 利用JRebel实现热部署
特别鸣谢:http://wlb.wlb.blog.163.com/blog/static/467413201522095132658/ ©IntelliJ IDEA开源社①群 185441009 鸣谢 ...
- 散货:null 强转 和 iOS null崩溃
问题1 在看 SpringMVC源码剖析(五)-消息转换器HttpMessageConverter 的时候,在 org.springframework.web.servlet.mvc.method ...
- Spring细粒度控制扫描Bean
接Spring 依赖注入(DI)的注解 <context:component-scan base-package="" resource-pattern="**/* ...
- c++ vector init操作
1) string str[n]={"hello", ...}; vector<string> strArray(str,str+n); 2) vector<st ...