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;width: 200px;height:100px;}.way1>.div2{margin-left: 200px;height: 100px;}.way2{display: flex;}.way2>.div1{width: 200px;height: 100px;}.way2>.div2{flex: 1;height: 100px;}.way3{position: relative;}.way3>.div1{width: 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>

转载于:https://www.cnblogs.com/60late/p/9243792.html

Css中实现一个盒子固定宽度，另一个盒子宽度自适应的方法相关推荐

网页中插入优酷土豆视频并让它自适应的方法
网页中插入优酷土豆视频并让它自适应的方法 2016-12-14 13:06 网页设计标签:视频 2459 发表评论今天看到一篇文章,讲的是Wordpress主题自适应插入视频的方法 ...
网页左侧固定宽度，右侧内容宽度自适应
网页左侧固定宽度,右侧内容宽度自适应废话不多,先上代码: css代码 <style type="text/css">*{margin: 0;padding: 0;}. ...
html中div的覆盖,CSS中如何使div覆盖另一个div的实例
将一个p覆盖在另一个p上有两种手段:一是设置margin为负值,二是设置绝对定位. 可以根个人情况设置z-index的值 1->position 为absolute的情况 #p1{positio ...
css中让图片铺满整个div盒子
盒子是middle #middle{border: 1px solid blue;position: absolute;margin-top:0px ;height: 590px;width: 134 ...
CSS中利用BootStrap框架引入glyphicon图标无法显示的解决方法
想要引用如图的对勾图标结果显示出来的是一个方框出现该问题的原因是由于没有注意bootstrap引入css和fonts的规范,就可能会导致bootstrap 在显示glyphicon图标时无法正常显 ...
左侧盒子固定宽度，右边盒子自适应，右侧里左边盒子自适应，右边盒子固定宽度
公司ui写给我的自适应盒子 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http ...
如何借助SVG+CSS用2个小时撸完一个网易云音乐的动效海报（可控制速度）
因为平时也关注网易UEDC的订阅号,前几天就看到了这么一个动效,主题是<网易云音乐2018年度听歌报告>,内容是一个人在努力蹬车因为构图简单,创意又不错,所以就试了下用SVG+CSS动画实 ...
html 伪元素放入标签,CSS中的before和:after伪元素使用详解
如果你一直密切关注着各种网页设计的博客,你可能已经注意到了:before和:after伪元素已经在前端开发中获得了相当多的关注.特别是在Nicolas Gallagher的博客中,后期运用了很多伪类元 ...
CSS中的BFC是什么？怎么用？
文章目录一.什么是BFC 二.如何创建一个BFC 三.BFC有什么特点四.BFC有什么用 1.解决外边距折叠问题 2.制作两栏布局 3.清除元素内部的浮动五.参考资料一.什么是BFC 官方定义 ...

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

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

Css中实现一个盒子固定宽度，另一个盒子宽度自适应的方法相关推荐

最新文章

热门文章