html - 弹性盒布局
问题描述
我正在开发一个带有引导程序和一些弹性容器的布局,但似乎无法找出为什么我的盒子总是比它的容器大。我创建了一个小提琴来说明这个问题: example fiddle 。
html 部分如下所示:
<div class="container-fluid overflow-hidden">
<div class="row flex-nowrap">
<div class="col const-width">
const
</div>
<div class="col">
<div class="bigcontent">
some very very very very very very very very very very very big content
</div>
</div>
<div class="col const-width">
const
</div>
</div>
</div>
CSS如下:
.const-width {
max-width: 100px !important;
min-width: 100px !important;
}
.bigcontent {
background: #aaaaaa;
white-space: nowrap;
}
正如你所看到的,我在侧面有两个等宽的盒子和一个灵活的盒子,它应该占据另外两个之间的剩余空间。如果灵活宽度框的内容变得太大,最右边的框就会被推到屏幕外。相反,我想要的是,灵活宽度框的内容可以滚动,并且所有内容都保留在屏幕上。
我通过将内容包装在另一个 div 中进行了尝试,但无法使其正常工作。
任何帮助表示赞赏!:)
解决方案
看起来像这样?
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
overflow-x:auto!important;
}
.const-width {
max-width: 100px !important;
min-width: 100px !important;
}
.bigcontent {
background: #aaaaaa;
min-width: 500px;
white-space: nowrap;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="container overflow-hidden">
<div class="row flex-nowrap">
<div class="col const-width">
const
</div>
<div class="col ">
<div class="bigcontent">
some very very very very very very very very very very very very very very very very big content
</div>
</div>
<div class="col const-width">
const
</div>
</div>
</div>
我删除滚动 div 并使用!important规则将 overflow-x 应用于.col类 auto
推荐阅读
- html - 是否可以在路由的 Angular 项目中调用静态 HTML 页面?
- android - Android 构建失败,字符串/google_app_id 重复资源错误
- python - 如何训练我的模型围绕图像中存在的文本绘制边界框?
- html - 获得特定分辨率时一个一个隐藏引导 div(响应式)
- python - 在图形界面中返回值
- python-3.x - python中的同时三角方程
- c# - 如何在 c# 控制台应用程序中使用分隔符从 txt 文件中选择特定列
- django - 删除功能发生错误(django fbv)
- javascript - 如何在javascript中正确运行firebase查询功能
- ios - 如何在导航栏中全局添加阴影和删除底线?