滚动条挤占内容宽度、破坏布局

最新推荐文章于 2023-12-29 16:52:15 发布

昵称已被占用了了了了

最新推荐文章于 2023-12-29 16:52:15 发布

阅读量1.5k

点赞数

分类专栏： css

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <meta charset="utf-8">
   <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

</head>
<style type="text/css">
   *{
       margin:0;
       padding: 0;
   }
   .ant-modal-content{
       width: 500px;
   }
   .ant-modal-body {
   padding: 10px;
   height: 210px;
   overflow-x: hidden;
   overflow-y: auto;
   border: 1px solid red;

   }
   .container {
   display: flex;
   flex-wrap: wrap;
   width: 517px;
   }
   .card{
       background:#ddd;

       height: 150px;
       margin:10px;
       width:100px;
   }

</style>
<body>
   <div class="ant-modal-content">
       <div class="ant-modal-body ">
           <div class='container'>
               <div class="card">001 辽宁号</div>
               <div class="card">002 山东号</div>
               <div class="card">003 弹射型</div>
               <div class="card">004 平甲板</div>
               <div class="card">001 辽宁号</div>
               <div class="card">002 山东号</div>
               <div class="card">003 弹射型</div>
               <div class="card">004 平甲板</div>
           </div>
       </div>

   </div>

</script>
</body>
</html>

原因很简单，现在的内-中-外三层结构里，滚动条吃掉的是外层的内容宽度，中间层的定宽为内层 div 的排列提供了保障。

原文参考https://blog.csdn.net/Beijiyang999/article/details/81911033

昵称已被占用了了了了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
滚动条挤占内容宽度、破坏布局

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;meta content="width=device-width, initial-scale=1.0, maximum-scale=1
复制链接

扫一扫