zoukankan      html  css  js  c++  java
  • 常见的两列布局

    想要实现的效果是,一列宽度固定,一列宽度自适应。想到的有三种方法。

    1. 绝对定位

    2. 浮动

    3. 两列都绝对定位

    下面请看代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title></title>
    	<style>
    		.container1, .container2, .container3 {
    			 100%;
    			margin-bottom: 20px;
    			position: relative;
    			height: 200px;
    		}
    
    		.left {
    			 100px;
    			height: 200px;
    			background: #999;
    		}
    
    		.right {
    			height: 200px;
    			background: red;
    		}
    
    		/*绝对定位*/
    		.container1 .left {
    			position: absolute;
    			left: 0;
    			top: 0;
    		}
    
    		.container1 .right {
    			margin-left: 120px;
    		}
    
    		/*浮动*/
    		.container2 .left {
    			float: left;
    		}
    
    		.container2 .right {
    			margin-left: 120px;
    		}
    
    		/*都绝对定位*/
    		.container3 .left {
    			position: absolute;
    			left: 0;
    			top: 0;
    		}
    
    		.container3 .right {
    			position: absolute;
    			left: 120px;
    			top: 0;
    		}
    
    
    
    	</style>
    </head>
    <body>
    	<div class="container1">
    		<div class="left">绝对定位</div>
    		<div class="right">margin-left</div>
    	</div>
    
    	<div class="container2">
    		<div class="left">浮动</div>
    		<div class="right">margin-left</div>
    	</div>
    
    	<div class="container3">
    		<div class="left">绝对定位</div>
    		<div class="right">绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位</div>
    	</div>
    </body>
    </html>
    
  • 相关阅读:
    IDEA插件Mybatis logs不打印Mybatis 或者 Mybatis -plus 的SQL日志
    JRebel启动报错,但不影响正常运行JRebel: ERROR Class 'org.springframework.boot.context.properties.ConfigurationPropertiesBindingPostProcessor' could not be processed by .....
    自增运算符 ++
    赋值操作符 =
    逻辑操作符
    算术操作符
    变量类型
    打印,注释,空白
    Java开发环境的安装和配置
    java应用背景
  • 原文地址:https://www.cnblogs.com/yzfdjzwl/p/6552234.html
Copyright © 2011-2022 走看看