zoukankan      html  css  js  c++  java
  • Css中实现一个盒子固定宽度,另一个盒子宽度自适应的方法

    Css中实现一个盒子固定宽度,另一个盒子宽度自适应的方法

    网上方法很多,个人认为以下两种思想是最为常用的。
    一种是让第一个盒子脱离文档流,第二个盒子离左边有一定距离。
    第二种方法是使用flex布局,不过有一些兼容性问题。
    直接上代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <style type="text/css">
    	.div1{background: red;}
    	.div2{background: yellow;}
    
    	.way1>.div1{float:left; 200px;height:100px;}
    	.way1>.div2{margin-left: 200px;height: 100px;}
    
    	.way2{display: flex;}
    	.way2>.div1{ 200px;height: 100px;}
    	.way2>.div2{flex: 1;height: 100px;}
    
    	.way3{position: relative;}
    	.way3>.div1{ 200px;height:100px;display: inline-block;}
    	.way3>.div2{height: 100px;position:absolute;left: 200px;right:0;display: inline-block;}
    </style>
    <script>
    </script>
    <body>
    	<!-- 两栏式布局,一方固定,一方自适应 -->
    	<!-- 方法1 浮动布局和margin-left,利用了块级元素占满一行的特性-->
    	<h1>方法2</h1>
    	<div class="way1">
    		<div class="div1"></div>
    		<div class="div2"></div>
    	</div>
    
    	<!-- 方法2 flex布局-->
    	<h1>方法2</h1>
    	<div class="way2">
    		<div class="div1"></div>
    		<div class="div2"></div>
    	</div>
    
    	<!-- 方法3 display+相对定位绝对定位方法-->
    	<h1>方法3</h1>
    	<div class="way3">
    		<div class="div1"></div>
    		<div class="div2"></div>
    	</div>		
    </body>
    </html>
    
  • 相关阅读:
    (转载)C#如何在任务管理器中不显示指定的窗体
    Windows上配置Mask R-CNN及运行示例demo.ipynb
    如何选择普通索引和唯一索引?
    relay(跳板机)搭建
    javascript 9x9乘法口诀表
    canvas画布爆炸
    Chrome Network Timing 解释
    JavaScript中对数组的定义
    jquery each 和 map 区别
    css 兼容性转换网站
  • 原文地址:https://www.cnblogs.com/60late/p/9243792.html
Copyright © 2011-2022 走看看