css布局——左边固定右边自适应

最新推荐文章于 2024-07-25 14:15:14 发布

viceen

最新推荐文章于 2024-07-25 14:15:14 发布

阅读量112

点赞数

分类专栏：面试类文章标签： css html javascript

本文链接：https://blog.csdn.net/weixin_44867717/article/details/120544538

版权

面试类专栏收录该内容

8 篇文章 0 订阅

订阅专栏

css布局——左边固定右边自适应

效果

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div class="big-box">
        <!-- <div class="bigIcon"></div> -->
        <div class="kindTitle">大类：</div>
        <div id="demo" class="kindText"><button>按钮一</button><button>按钮一</button><button>按钮一</button><button>按钮一</button><button>按钮一</button><button>按钮一</button><button>按钮一</button><button>按钮一</button><button>按钮一</button><button>按钮一</button>  </div>
    </div>
    <style>
        .big-box{
            width:100%;
            margin-top:50px;
        }
        .bigIcon{
            width:16px;
            height:16px;
            background: #3077E8;
            border-radius:50%;
            margin-top: 4px;
            float: left;
        }
       /* 加float */
        .kindTitle{
            width:60px;
            margin-left: 20px;
            /* float: right; */
            float: left;
          

        }
        button{
            display: inline-block;
            margin: 5px 5px;
            width: 230px;
        }
      /* 不要加float，就会随着浏览器大小宽度自适应改变 */
        .kindText{
            margin-left: 100px; 
            /* margin-right: 100px;  */

            /* white-space: nowrap;
            overflow:hidden; */
        }
        .abc{
            display: none;
        }
    </style>
    <script>
           var div = document.getElementById('demo');
            // console.log(div.offsetHeight); // 224
            console.log(div.clientHeight); // 220
      
    </script>
</body>
</html>

viceen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css布局——左边固定右边自适应

css布局——左边固定右边自适应效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sc
复制链接

扫一扫