<!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. SpringMvc数据校验@Valid等注解的使用与工具类抽取

    最近在重构老项目的代码,发现校验入参占用了很多代码,之前我对这一块的认识局限于使用StringUtils等工具来多个if块进行判断,代码是没什么问题,但是总写这些令人生烦,毕竟写代码也要讲究优雅的嘛, ...

  2. 20155314 2016-2017-2 《Java程序设计》第6周学习总结

    20155314 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 理解流与IO 理解InputStream/OutPutStream的继承架构 理解Reade ...

  3. win8开wifi共享无法使用的问题解决办法

    相信现在不少人都安装了windows8操作系统,因为windows8这个全新的操作系统用起来 确实挺强大,包括漂亮的开始屏,但是不得不说这个系统的兼容性还是有待提高,所以win8我的 装了又卸,卸了又 ...

  4. QTP图片验证/图片比较/二进制流对比法

    图片验证主要是文件对比,其中我们可以利用二进制的方法读取图片信息,然后进行对比,达到对比的效果,本例子利用fso对象的文件流的方法实现,代码如下: Public Function CompareFil ...

  5. [转]使用 mitmproxy + python 做拦截代理

    使用 mitmproxy + python 做拦截代理   本文是一个较为完整的 mitmproxy 教程,侧重于介绍如何开发拦截脚本,帮助读者能够快速得到一个自定义的代理工具. 本文假设读者有基本的 ...

  6. selnium远程机上传图片遇到的坑

    一般上传图片方法采取方案如下: input标签的file类型上传图片,使用对象的sendkeys+路径方法 使用js注入,再用使用对象的sendkeys+路径方法 使用autolt生成的exe,打开对 ...

  7. Mac 命令行安装 dmg文件

    1.安装dmg文件 hdiutil attach jdk-9.0.1_osx-x64_bin.dmg 会挂载在 /Volumes 目录下 2.安装pkg文件(可以 man installer 查看命令 ...

  8. 使用nginx统一代理dashboard,grafana,Prometheus二级目录访问

    k8s上的这些管理工具必不可少,可以统一在nginx下的二级目录下. ingress是好,但我们不方便使用内部域名,相信么...:) 一,prometheus改造 在prometheus的deploy ...

  9. maven 配置阿里云仓库

    <mirror>     <id>nexus-aliyun</id>     <mirrorOf>*</mirrorOf>     < ...

  10. 使用libvirt管理KVM（一）

    一. 安装和配置libvirt,源码下载http://www.qemu-project.org/download/#source. 二. 从包和源码包进行安装libvirt. 1. 在ubuntu系统 ...