<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div模拟table，可实现左右高度同增长</title>
<style type="text/css">
body{
    background: #ccc;
}
.box{
    width: 800px;
    background: #999;
    margin: 0 auto;
}
.div-tabel{
    display: table;
    width: 800px;
    border-spacing:20px;/*边距*/
}
.div-tabel-row{
    display: table-row;
}
.div-table-cell{
    display: table-cell;
    background: #fff;
    width: 50%;
    padding: 20px;
}
</style>

</head>
<body>
    <div class="box">
        <div class="div-tabel">
            <div class="div-tabel-row">
                <div class="div-table-cell">
                    <p>div模拟table，可实现左右高度同增长div模拟table，可实现左右高度同增长</p>
                </div>
                <div class="div-table-cell">
                    <p>div模拟table，可实现左右高度同增长div模拟table，可实现左右高度同增长div模拟table，可实现左右高度同增长div模拟table，可实现左右高度同增长div模拟table，可实现左右高度同增长div模拟table，可实现左右高度同增长</p>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

效果：

div模拟table，可实现左右高度同增长（html布局）的更多相关文章

  1. div模拟table

    <!DOCTYPE html><html><head><meta charset="UTF-8"><title>div模 ...

  2. 使用contenteditable+div模拟textarea文本域实现高度自适应

    使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...

  3. 通过div模拟table

    参考: https://css-tricks.com/complete-guide-table-element/ 不要使用内联样式,但只是为了了解这里是如何去: <section style=& ...

  4. div模拟textarea文本域轻松实现高度自适应——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...

  5. div模拟textarea实现高度自增长

    今天突然有位前端的朋友问我textarea怎么实现高度随内容自增长,我一下子懵了,首先想到的是用js改变textarea的高度,但是百度了很多参考代码效果都不是很理想. 因为之前实际项目中用的text ...

  6. div模拟textarea以实现高度自适应实例页面

    作为多行文本域功能来讲,textarea满足了我们大部分的需求.然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应.textarea总是很自信地显摆它的滚动条,高度固执 ...

  7. div模拟textarea文本域轻松实现高度自适应

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. H5新增属性contenteditable（不用JS，实现div模拟textarea高度自增长）

    无意中看到一篇博客介绍了contenteditable这个属性——不需用JS,只需在div里加上contenteditable="true",即可实现div模拟textrarea( ...

  9. div模拟textarea自适应高度

    之前在公司做项目的时候,有这么一个需求,要我写一个评论框,可以随着评论的行数增加而自动扩大,最开始我想用textarea实现,但是后来尝试后发现textarea并不适合,textarea的高度不会随着 ...

随机推荐

  1. 使用tmpfs作为缓存加速缓存的文件目录

    使用tmpfs作为缓存加速缓存的文件目录 [root@web02 ~]# mount -t tmpfs tmpfs /dev/shm -o size=256m[root@web02 ~]# mount ...

  2. empty isset

    1.当变量未定义时,is_null()和"参数本身"是不允许作为参数判断的,会报Notice警告错误: 2.empty,isset首先都会检查变量是否存在,然后对变量值进行检测.而 ...

  3. insmod过程详解【转】

    转自:http://blog.csdn.net/chrovery/article/details/51088425 转自 http://blog.chinaunix.net/xmlrpc.php?r= ...

  4. EditText光标位置

    1.xml中设置 gravity="top"  加入edittext框的高度不止一行时,该属性可是光标定位在第一行,不设置的话光标是默认在框的中间 2.etEdit.setSele ...

  5. CSS3中毛玻璃效果的使用方法

    今天在使用icloud的时候看到苹果icloud官网的毛玻璃效果非常赞,仔细研究了一下它的实现方式,是使用js配合background-image: -webkit-canvas的形式绘制出的毛玻璃背 ...

  6. android 时间 格式

    http://blog.csdn.net/yudajun/article/details/7939552

  7. this的问题

    javascript this可以绑定到:全局对象,自己定义的对象,用构造函数生成的对象,通过call或者apply更改绑定的对象    1.全局对象  1 2 3 4 5 function glob ...

  8. servlet上传下载（任何格式的都可以）

    jar不能低于此版本,JDK1.6以上,否则户报错 <dependency> <groupId>commons-fileupload</groupId> <a ...

  9. strom的使用02

    1.grouping分组策略 stream grouping就是用来定义一个stream应该如果分配给Bolts上面的多个Tasks. storm里面有6种类型的stream grouping: 1. ...

  10. 【leetcode❤python】 125. Valid Palindrome

    #-*- coding: UTF-8 -*- class Solution(object):    def isPalindrome(self, s):        ""&quo ...