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

最新推荐文章于 2023-02-15 23:43:51 发布

weixin_33720078

最新推荐文章于 2023-02-15 23:43:51 发布

阅读量2.4k

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/60late/p/9243792.html

版权

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

weixin_33720078

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Css中实现一个盒子固定宽度，另一个盒子宽度自适应的方法

Css中实现一个盒子固定宽度，另一个盒子宽度自适应的方法网上方法很多，个人认为以下两种思想是最为常用的。一种是让第一个盒子脱离文档流，第二个盒子离左边有一定距离。第二种方法是使用flex布局，不过有一些兼容性问题。直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF...
复制链接

扫一扫