<!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的更多相关文章

  1. IText 生成pdf,处理table cell列跨页缺失的问题

    /**     * 创建(table)PDF,处理cell 跨页处理     * @param savePath(需要保存的pdf路径)     * @param pmbs (数据库查询的数据)    ...

  2. [转]AngularJS fixed header scrollable table directive

    本文转自:http://pointblankdevelopment.com.au/blog/angularjs-fixed-header-scrollable-table-directive This ...

  3. js实现table用鼠标改变td的宽度,固定table宽度和高度超过显示点

    <!DOCTYPE HTML> <html> <head> <meta charset="gbk"> <title>ta ...

  4. DIV做的Table

    <style> div.table{ border:1px solid #d7d7d7; margin-left:0px; border-bottom-width:; width:1200 ...

  5. Guava学习笔记:Guava新集合-Table等

    Table 当我们需要多个索引的数据结构的时候,通常情况下,我们只能用这种丑陋的Map<FirstName, Map<LastName, Person>>来实现.为此Guava ...

  6. 创建一个Table View

    在本课程中,您将创建应用程序FoodTracker的主屏幕.您将创建第二个,表视图为主场景,列出了用户的菜谱.你会设计定制表格单元格显示每一个菜谱,它是这样的: 学习目标 在课程结束时,你将能够: 创 ...

  7. iphone dev 入门实例1:Use Storyboards to Build Table View

    http://www.appcoda.com/use-storyboards-to-build-navigation-controller-and-table-view/ Creating Navig ...

  8. JS可改变列宽table

    <!DOCTYPE HTML> <html> <head> <meta charset="gbk"> <title>ta ...

  9. 从零开始学ios开发(十二):Table Views(中)UITableViewCell定制

    我们继续学习Table View的内容,这次主要是针对UITableViewCell,在前一篇的例子中我们已经使用过UITableViewCell,一个默认的UITableViewCell包含imag ...

  10. 从零开始学ios开发(十二):Table Views(上)

    这次学习的控件非常重要且非常强大,是ios应用中使用率非常高的一个控件,可以说几乎每个app都会使用到它,它就是功能异常强大的Table Views.可以打开你的iphone中的phone.Messa ...

随机推荐

  1. 第9月第26天 pairs和ipairs cocos2dx 动画

    1. a={ ip = "127.0.0.1", port = 6789 } for i,v in pairs(a) do print(i,v) end a={1} for i,v ...

  2. Docker01 CentOS配置Docker

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间不会有任何 ...

  3. 第二篇:服务消费者(rest + ribbon)

    一. ribbon简介 ribbon是一个负载均衡客户端,可以很好的控制http和tcp的一些行为,Feign也用到了ribbon,当你使用@ FeignClient,ribbon自动被应用. Rib ...

  4. Js表单验证控件

    演示地址:http://weishakeji.net/Utility/Verify/Index.htm    开源地址:https://github.com/weishakeji/Verify_Js ...

  5. [转]C++11 随机数学习

    相对于C++ 11之前的随机数生成器来说,C++11的随机数生成器是复杂了很多.这是因为相对于之前的只需srand.rand这两函数即可获取随机数来说,C++11提供了太多的选择和东西. 随机数生成算 ...

  6. string替换所有指定字符串(C++)

    C++的string提供了replace方法来实现字符串的替换,但是对于将字符串中某个字符串全部替换这个功能,string并没有实现,我们今天来做的就是这件事. 首先明白一个概念,即string替换所 ...

  7. 7z

    7zip是一款开源的解压缩软件,不仅自己独有的7z格式,而且支持zip,rar,tar,gzip等众多其他格式,同时7z格式的压缩比例很高,目前很多硬盘版的游戏都采用zip进行打包.下面介绍一下Lin ...

  8. 一个浏览器Fuzzing框架的学习

    一个浏览器Fuzzing框架的学习 关于框架 之前是LCatro师傅在小密圈分享的他写的这个Fuzzing框架(不过我以前翻github时好像就看到过),但是之前一直没啥时间搞这方面,这两天研究学习了 ...

  9. ERP客户关系渠管理添加和修改联系人(二十一)

    树形结构treeview 前端代码: <form id="form1" runat="server"> <div> <asp:Tr ...

  10. Java编程的逻辑 (11) - 初识函数

    本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http:/ ...