zoukankan      html  css  js  c++  java
  • 解决 多列 布局 左右等高问题

    两栏自适应,左侧固定,右侧自适应。
    右侧增长,左侧也随之增长。
    
    (1)table 可以实现等高布局
    
    <div class="parent">
    	<div class="left">
    		<p>left</p>
    	</div>
    	<div class="right">
    		<p>right</p>
    		<p>right</p>
    		<p>right</p>
    	</div>
    </div>
    
    <style type="text/css">
    	body {
    		margin: 0;
    		padding: 0;
    	}
    	.parent {
    		display: table;
    		 100%;
    		table-layout: fixed;
    		background-color: #ddd;
    	}
    
    	.left, .right {
    		display: table-cell;
    	}
    
    	.left {
    		 100px;
    		padding-right: 20px;
    	}
    
    </style>
    
    
    
    (2)flex 
    天然等高,align-item的对齐方式。默认就是拉伸,
    
    <div class="parent">
    	<div class="left">
    		<p>left</p>
    	</div>
    	<div class="right">
    		<p>right</p>
    		<p>right</p>
    	</div>
    </div>
    
    <style type="text/css">
    	body {
    		margin: 0;
    		padding: 0;
    	}
    	.parent {
    		display: flex;
    		background-color: #ddd;
    	}
    
    	.left {
    		 100px;
    		padding-right: 20px;
    	}
    
    	.right {
    		flex: 1;
    	}
    
    </style>
    
    
    
    
    (3) float
    实现的是伪等高,不是真实的,但是兼容性好。
    
    <div class="parent">
    	<div class="left">
    		<p>left</p>
    	</div>
    	<div class="right">
    		<p>right</p>
    		<p>right</p>
    	</div>
    </div>
    
    <style type="text/css">
    	.parent {
    		overflow: hidden;
    	}
    
    	.left, .right {
    		padding-bottom: 9999px;
    		margin-bottom: -9999px;
    	}
    
    	.left {
    		float: left;
    		 100px;
    		margin-right: 20px;
    		background-color: #ccc;
    	}
    
    	.right {
    		overflow: hidden;
    		background-color: #369;
    	}
    
    </style>
    

      

  • 相关阅读:
    垂直的SeekBar:VerticalSeekBar
    android 获取路径目录方法以及判断目录是否存在,创建目录
    JSON
    列表和导航
    【前端积累】链接
    【前端积累】背景图像和背景替换
    【前段积累】可视化模型
    【前端积累】选择器
    银联支付-产品测试sdk使用流程
    【CSS系列】块级元素和行内元素
  • 原文地址:https://www.cnblogs.com/hgonlywj/p/4903275.html
Copyright © 2011-2022 走看看