zoukankan      html  css  js  c++  java
  • 研究table-cell和overflow

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    .box{
    
    200px;
    height: 200px;
    border:1px solid red;
    overflow:auto;
    
    }
    
    .testTable-cell{
    
    display:table-cell;
    border:1px solid red;
    padding:10px;
    vertical-align:middle;
    3000px;
    
    }
    
    .testTable-cell div{
    
    display:inline-block;
    
    
    }
    
    .first{
    
    100px;
    }
    
    .one{
    
     100px;
    background: red;
    
    }
    
    .two{
    
     200px;
    background: blue;
    
    }
    
    .three{
    
    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>
  • 相关阅读:
    在wubantu时,用pychram创建django的App时,出现未找到命令
    Anaconda3 打开Navigator报错
    wubantu18.04版,pycharm2.18.3.2永久破解来了,借鉴个位大神的教程破掉的,感谢各位大佬
    找回感觉的练习
    第四次博客作业-结对项目
    第9次作业--接口及接口回调
    第8次作业--继承
    软件工程第三次作业——关于软件质量保障初探
    第7次作业--访问权限、对象使用
    第6次作业--static关键字、对象
  • 原文地址:https://www.cnblogs.com/liveoutfun/p/9686072.html
Copyright © 2011-2022 走看看