zoukankan      html  css  js  c++  java
  • 常见的页面中两个div自适应等高CSS控制

    第一种利用dispaly:table,父级div设置dispaly:table子级div设置display: table-cell;

    第一种利用dispaly:flex,父级div设置dispaly:flex子级div设置flex: 1;

    上代码

    <!DOCTYPE html>
    <html>
    <head>
    	<title>布局测试</title>
    	<style type="text/css">
    		/*第一种方式*/
    		.div-box1{
    			display: table;
    			padding: 10px;
    			border: 1px solid #000;
    		}
    		.div1{
    			display: table-cell;
    			border: 1px solid #000;
    		}
    		.div2{
               display: table-cell;
               border: 1px solid #000;
    		}
    		/*第二种方式*/
    		.div-box2{
    			display: flex; 
    			padding: 10px;
    			border: 1px solid #000;
    			margin-top: 20px;
    		}
    		.div3{
    			flex: 1;
    			border: 1px solid #000;
    		}
    		.div4{
    			flex: 1;
    			border: 1px solid #000;
    		}
    	</style>
    </head>
    <body>
    	<div class="div-box1">
    		<div class="div1"><p>第一个盒子</p><p>第一个盒子</p><p>第一个盒子</p><p>第一个盒子</p><p>第一个盒子</p></div>
    		<div class="div2">第二个盒子</div>
    	</div>
    		<div>测试成功</div>
    	<div class="div-box2">
    		<div class="div3"><p>第一个盒子</p><p>第一个盒子</p><p>第一个盒子</p><p>第一个盒子</p><p>第一个盒子</p></div>
    		<div class="div4">第二个盒子</div>
    	</div>
    
    	<div>测试成功</div>
    
    </body>
    <script type="text/javascript">
    
    </script>
    </html>
    

      运行结果截图

  • 相关阅读:
    Java 面向对象_继承
    Java 面向对象
    使用 pykafka 进行消费
    oracle 的分页、截断查询
    Day03
    Day02 计算机的组成与编程语言
    Day01 MarkDown的使用
    Java方法的重点
    Scanner的小细节
    Java包机制和Javadoc的使用
  • 原文地址:https://www.cnblogs.com/yuwen1995/p/9215089.html
Copyright © 2011-2022 走看看