<!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. tensorflow的卷积和池化层（二）：记实践之cifar10

    在tensorflow中的卷积和池化层(一)和各种卷积类型Convolution这两篇博客中,主要讲解了卷积神经网络的核心层,同时也结合当下流行的Caffe和tf框架做了介绍,本篇博客将接着tenso ...

  2. python技巧 is 和 ==

    is 判断变量是否指向同一个对象 == 判断变量引用的对象是否相等 In [2]: a=[1,2] In [3]: b=a In [4]: a == b Out[4]: True In [5]: a ...

  3. zookeeper笔记之基于zk实现分布式锁

    一.分布式锁概述 Java中基于AQS框架提供了一系列的锁,但是当需要在集群中的多台机器上互斥执行一段代码或使用资源时Java提供的这种单机锁就没了用武之地,此时需要使用分布式锁协调它们.分布式锁有很 ...

  4. String类的深入理解

    String不是基本数据类型,String和8种包装类型是不可变类.String和8种基本数据类型采用值传递. 关于方法区中的常量区和class文件中的常量区的关系,参考:https://www.cn ...

  5. Java Service Wrapper将java程序设置为服务

    有时候我们希望我们java写的程序作为服务注册到系统中,Java Service Wrapper(下面简称wrapper)是目前较为流行的将Java程序部署成Windows服务的解决方案, 本文将讨论 ...

  6. 【技巧总结】理解XXE从基础到盲打

    原文:http://agrawalsmart7.com/2018/11/10/Understanding-XXE-from-Basic-to-Blind.html 这篇文章中将讨论以下问题. XXE是 ...

  7. swapper进程【转】

    转自:https://blog.csdn.net/qq_27357145/article/details/80462292 LINUX进程小结 id为0的进程通常是调度进程,常常被称为交换进程(swa ...

  8. Android BLE设备蓝牙通信框架BluetoothKit

    BluetoothKit是一款功能强大的Android蓝牙通信框架,支持低功耗蓝牙设备的连接通信.蓝牙广播扫描及Beacon解析. 关于该项目的详细文档请关注:https://github.com/d ...

  9. 全键盘操作Windows

    计算机机用户在使用计算机的时候,是用键盘多一点?还是用鼠标多一点?如果是专业打字员,应该会说他使用键盘多一点,除此之外,多数人都会告诉你,他已经离不开鼠标了,没有鼠标,就不会操作电脑.   如果某一天 ...

  10. FileOutputSteam入门

    FileOutputSteam 字节输入流 从控制台将字节保存到本地硬盘 package com.isoftstone.io; import java.io.FileOutputStream; imp ...