<!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. 玩转Hook——Android权限管理功能探讨（一）

    随着Android设备上的隐私安全问题越来越被公众重视,恶意软件对用户隐私,尤其是对电话.短信等私密信息的威胁日益突出,各大主流安全软件均推出了自己的隐私行为监控功能,在root情况下能有效防止恶意软 ...

  2. 面试:----Struts和springmvc的区别--区别上

    SpringMVC和Struts2的区别 1核心控制器(前端控制器,预处理控制器):对于使用过MVC框架的人来说这个词应该不会陌生.核心控制器的主要用途处理所有的请求.然后对那些特殊的请求.统一的进行 ...

  3. str函数

    python2: a = str(unicode类对象) #str()函数如果接收的参数是unicode类,会转换为python的defaultencoding格式,所以,如果unicode类对象是汉 ...

  4. C#调用Java WebService int、DateTime等类型值接收到为空

    今天在调用Java接口时,有个int类型的值很明确的传了1,但接口一直返回没有接收到这个值. 解决方法: 引用接口时,VS会自动生成一个类,类中对于非string类型的字段会生成一个xxSpecifi ...

  5. 【API】网络编程模型、多线程

    1.网络通信编程 1)网络通信模型基础知识 TCP Server: WSAStartup() socket() bind() linsten() accept() send/recv() closes ...

  6. 谁在call我-backtrace的实现原理【转】

    转自:http://www.xuebuyuan.com/1504689.html 显示函数调用关系(backtrace/callstack)是调试器必备的功能之一,比如在gdb里,用bt命令就可以查看 ...

  7. elasticsearch安装servicewrapper插件

    1)下载elasticsearch-servicewrappergit clone https://github.com/elasticsearch/elasticsearch-servicewrap ...

  8. JavaScript——创建对象

    <script type="text/javascript"> //声明变量的首字母是小写 //1.对象字面量 /*var person = { name:" ...

  9. APK方法数超过65535及MultiDex解决方案

    以下参考自官方文档配置方法数超过 64K 的应用 随着 Android 平台的持续成长,Android 应用的大小也在增加.当您的应用及其引用的库达到特定大小时,您会遇到构建错误,指明您的应用已达到 ...

  10. goodrain云平台 mysql主从同步应用创建

    mysql 主从同步原理 1)在Slave 服务器上执行sart slave命令开启主从复制开关,开始进行主从复制. 2)此时,Slave服务器的IO线程会通过在master上已经授权的复制用户权限请 ...