研究table-cell和overflow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{ width:200px;
height: 200px;
border:1px solid red;
overflow:auto; } .testTable-cell{ display:table-cell;
border:1px solid red;
padding:10px;
vertical-align:middle;
width:3000px; } .testTable-cell div{ display:inline-block; } .first{ width:100px;
} .one{ width: 100px;
background: red; } .two{ width: 200px;
background: blue; } .three{ width:300px;
background: orange; } </style>
</head>
<body> <!-- overflow scoll 只要设置就会出现滚动条
而设置auto只有内容超出父元素才会出现滚动条
--> <!-- 研究display:table-cell -->
<!-- 设置之后 会默认的创建一个tr table 来包裹它
为了让它成为真正的td
所以它这样设置完以后具有td的特性
等高 自适应宽度 可以利用vertical-align:middle 实现垂直居中 还可以实现
左定宽 右自适应宽度
但是 右边的父元素宽度要设置一个大值 为了当子元素
宽度太大 也会自适应
-->
<div class="box"> 帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9 </div> <div class="testTable-cell first"> 帅哥帅哥帅哥帅哥帅哥<br>
帅哥帅哥帅哥帅哥帅哥<br>
帅哥帅哥帅哥帅哥帅哥<br>
帅哥帅哥帅哥帅哥帅哥<br> </div> <div class="testTable-cell"> <div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div> <div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div> <div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div> <div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div> </div> <script> </script>
</body>
</html>
研究table-cell和overflow的更多相关文章
- IText 生成pdf，处理table cell列跨页缺失的问题
/** * 创建(table)PDF,处理cell 跨页处理 * @param savePath(需要保存的pdf路径) * @param pmbs (数据库查询的数据) ...
- [转]AngularJS fixed header scrollable table directive
本文转自:http://pointblankdevelopment.com.au/blog/angularjs-fixed-header-scrollable-table-directive This ...
- js实现table用鼠标改变td的宽度，固定table宽度和高度超过显示点
<!DOCTYPE HTML> <html> <head> <meta charset="gbk"> <title>ta ...
- DIV做的Table
<style> div.table{ border:1px solid #d7d7d7; margin-left:0px; border-bottom-width:; width:1200 ...
- Guava学习笔记：Guava新集合-Table等
Table 当我们需要多个索引的数据结构的时候,通常情况下,我们只能用这种丑陋的Map<FirstName, Map<LastName, Person>>来实现.为此Guava ...
- 创建一个Table View
在本课程中,您将创建应用程序FoodTracker的主屏幕.您将创建第二个,表视图为主场景,列出了用户的菜谱.你会设计定制表格单元格显示每一个菜谱,它是这样的: 学习目标 在课程结束时,你将能够: 创 ...
- iphone dev 入门实例1:Use Storyboards to Build Table View
http://www.appcoda.com/use-storyboards-to-build-navigation-controller-and-table-view/ Creating Navig ...
- JS可改变列宽table
<!DOCTYPE HTML> <html> <head> <meta charset="gbk"> <title>ta ...
- 从零开始学ios开发（十二）：Table Views（中）UITableViewCell定制
我们继续学习Table View的内容,这次主要是针对UITableViewCell,在前一篇的例子中我们已经使用过UITableViewCell,一个默认的UITableViewCell包含imag ...
- 从零开始学ios开发（十二）：Table Views（上）
这次学习的控件非常重要且非常强大,是ios应用中使用率非常高的一个控件,可以说几乎每个app都会使用到它,它就是功能异常强大的Table Views.可以打开你的iphone中的phone.Messa ...
随机推荐
- Sublime Text 2 绿色汉化版 x64
前天介绍了<Sublime Text 2 绿化与汉化 [Windows篇]>,应大家要求,我特地做了汉化版分享给大家. 很清新吧,但我没安装多余的插件,只是安装了几个必备的插件,如 输入法 ...
- Angular 下的 directive （part 2）
ngCloak ngCloak指令被使用在,阻止angular模板从浏览器加载的时候出现闪烁的时候.使用它可以避免闪烁问题的出现. 该指令可以应用于<body>元素,但首选使用多个ng ...
- 使用storyboard显示UITableView时,如果不修改系统默认生成的tableView:cellForRowAtIndexPath:方法中的代码,则必须为UITableViewCell注册(填写)重用标识符:identifier.必须要代码方法中的标识符一致.
CHENYILONG Blog 使用storyboard显示UITableView时,如果不修改系统默认生成的tableView:cellForRowAtIndexPath:方法中的代码,则必须为UI ...
- 学习mysql replication gitd
- 2.选择元素 - 自定义过滤器《jquery实战》
2.5.6 自定义过滤器 jQuery 中有两种方法创建自定义的过滤器.第一种比较简单,但是不鼓励,从 jQuery 1.8 开始已经被第二种方法取代.记住,使用新方法时,你自定义的过滤器在 jQue ...
- 直接以管理员身份运行bat代码
https://www.cnblogs.com/dengpeng1004/p/7044441.html
- java多线程整理
参考博客: http://blog.csdn.net/javazejian/article/details/50878598
- Angular快速学习笔记(4) -- Observable与RxJS
介绍RxJS前,先介绍Observable 可观察对象(Observable) 可观察对象支持在应用中的发布者和订阅者之间传递消息. 可观察对象可以发送多个任意类型的值 -- 字面量.消息.事件. 基 ...
- 【LOJ】#2511. 「BJOI2018」双人猜数游戏
题解 设\(f[p][a][b]\)表示询问了\(p\)次,答案是\(a,b\)是否会被猜出来 然后判断如果\(p = 1\) 第一个问的\(Alice\),那么\([s,\sqrt{nm}]\)约数 ...
- Codeforces 652F Ants on a Circle
Ants on a Circle 感觉这个思路好巧妙啊. 我们能发现不管怎么碰撞,初始态和最终态蚂蚁间的相对顺序都是一样的, 并且所占的格子也是一样的, 那么我们就只需要 找到其中一个蚂蚁的最终位置就 ...