时间戳

首页 > 解决方案 > 第二个div上的水平滚动

html - 第二个div上的水平滚动

问题描述

我遇到了一个问题。我创建了一个看起来像 HTML 表格的部分。但我没有为此使用“table”标签。

我纯粹使用 HTML 和 CSS 来实现上述目标。现在的问题是我无法使其响应。我知道我可以通过简单地使用溢出属性使其响应。但我不想滚动整个部分。我只想在该部分的右侧水平滚动。在我的示例中，它是我想要滚动的右内容类。即 left-content 类必须存在，这样如果我滚动右侧，左侧必须固定在那里，用户可以看到它。

<div class="outer-wrapper">

我附上了 codepen 链接以访问整个代码。

https://codepen.io/Mehreen_Fayaz/pen/KjNoMG

标签： htmlcssscrollresponsive-design

解决方案

我认为您诚实地设置flex-basis属性的次数超过了有用的次数，这导致了您的问题。

使用flex-grow/flex-shrink来允许空间被占用或被挤压比试图通过改变flex-basisfromauto值来过于精确要好。

对于您的确切情况，这些更改应该可以解决您在窄屏幕上看到的一些奇怪现象......

  • display: flex从中删除.outer-wrapper
  • 删除flex-basis: 74%并.right-content设置flex: 0 1 75%
  • 一直开着overflow-x: auto;，.right-content不需要媒体查询
  • 删除flex-basis: 26%并.left-content设置flex: 1 0 auto
  • 删除flex-basis: 20%from.right-content .head并设置flex: 1

这应该可以解决大多数“过度设计”的布局问题，然后我建议的最后一件事是在“表格单元格”周围添加一些填充，以便在小屏幕上文本不会直接进入自己，给自己一些喘息的空间。但是您可能还需要设置box-sizing: border-box它们，以便填充将推入文本而不是从您设置的宽度/高度值推出。

祝你好运。

推荐阅读