<!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. js和jquery使按钮失效为不可用状态的方法

    设置disabled属性为true即为不可用状态. html代码: <input type="button" value="提交" id="bt ...

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

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

  3. 爬虫笔记之自如房屋价格图片识别（价格字段css背景图片偏移显示）

    一.前言 自如房屋详情页的价格字段用图片显示,特此破解一下以丰富一下爬虫笔记系列博文集. 二.分析 & 实现 先打开一个房屋详情页观察一下: 网页的源代码中没有直接显示价格字段,价格的显示是使 ...

  4. ViewGroup.layout(int l, int t, int r, int b)四个输入参数的含义

    ViewGroup.layout(int l, int t, int r, int b)这个方法是确定View的大小和位置的,然后将其绘制出来,里面的四个参数分别是View的四个点的坐标,他的坐标不是 ...

  5. 关于Spring 事务管理传播属性的配置及作用－嵌套事务

    先了解事务的7种传播属性: PROPAGATION_REQUIRED -- 支持当前事务,如果当前没有事务,就新建一个事务.这是最常见的选择. PROPAGATION_SUPPORTS -- 支持当前 ...

  6. 初始ASP.NET数据控件【续 DataList】

    DataList控件  DataList控件也是一个常用的数据绑定控件,相对于GridView控件虽然没它那么强大的功能,但是灵活性却很强势.因为其本身就是一个富有弹性的控件.DataList控件可以 ...

  7. selenium玩转svg操作

    今天写脚本发现页面有svg结构,里面的元素无法定位,查找很多资料,然后就记录下来 初步尝试直接在页面中获取svg中包含元素的xpath,直接利用selenium方法访问,无法捕获到相关元素信息. SV ...

  8. laravel 批量更新

    /** * 转发动态和资讯数量统计 */ public function forwardCounts(FeedModel $feedModel) { //统计动态转发的id $feeds=$feedM ...

  9. nodejs mysql 执行多条sql语句

    执行多条查询语句 为了安全起见,默认情况下是不允许执行多条查询语句的.要使用多条查询语句的功能,就需要在创建数据库连接的时候打开这一功能: var connection = mysql.createC ...

  10. DDD领域模型企业级系统Linq的CRUD（四）

    建造一个Product Module类: ProductDBContextDataContext dbcontext = new ProductDBContextDataContext(); publ ...