html - 如何仅使 div 行的一部分可滚动(使用清晰度而不是 Bootstrap 样式)

Question

我有一个带有 dot net core 的 Angular 元素，我正在为一个组件中的一些样式而苦苦挣扎。

我有一行包含 2 列，第一列为空，第二列包含另一行，多列填充随机数，我只想让第二列包含多列的行可水平滚动。空的第一列不应该是可滚动的。

(我只是在列中添加了随机数以填充一些内容。)

我已经在 overflow-x: auto 的样式中尝试了 white-space: nowrap 并设置为滚动，但应该可滚动的列是不滚动，而是相互堆叠。

<div class="clr-row ">
  <div class="clr-col-2" style="background-color:aqua">
    <span >.</span>
  </div>
  <div class="clr-col-10" style="overflow-x:auto; width:100%; white-space:nowrap;">
    <div class="clr-row">
      <div class="clr-col" style="background-color:rebeccapurple">
        <span>1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 </span>
      </div>
      <div class="clr-col" style="background-color:brown;">
        <span>2 2 2 2 2</span>
      </div>
      <div class="clr-col" style="background-color:burlywood;">
        <span>3 3 3 3 3 3 3 3 3 3 3 3 3 3</span>
      </div>
      <div class="clr-col" style="background-color:cadetblue;">
        <span>4 4 4 4 4 </span>
      </div>
      <div class="clr-col" style="background-color:deeppink;">
        <span> 5 5 5 5 5 5 5 5 5 5 5 5 5 5</span>
      </div>
      <div class="clr-col" style="background-color:greenyellow;">
        <span>6 6 6 6 6 </span>
      </div>
      <div class="clr-col" style="background-color:orange;">
        <span>7 7 7 7 7 7 7 7 7 7 7 7 7 7</span>
      </div>
      <div class="clr-col" style="background-color:black;">
        <span>8 8 8 8 8 8 </span>
      </div>
      <div class="clr-col" style="background-color:dimgrey;">
        <span>9 9 9 9 9 9 9 9 9 9 9 9 9 9</span>
      </div>
      <div class="clr-col" style="background-color:palegoldenrod;">
        <span>0 0 0 0 0 0 </span>
      </div>
      <div class="clr-col" style="background-color:lightcoral;">
        <span>1 1 1 1 1 1 1 1 1 1 1 1 1 1</span>
      </div>
      <div class="clr-col" style="background-color:wheat;">
        <span>2 2 2 2 2 2 </span>
      </div>
      <div class="clr-col" style="background-color:teal;">
        <span>3 3 3 3 3 3 3 3 3 3 3 3 3 3 </span>
      </div>
      <div class="clr-col" style="background-color:Highlight;">
        <span>4 4 4 4 4 4 </span>
      </div>
    </div>
  </div>
</div>

我只希望第二列由一行组成，其中包含许多列，其中随机数是可滚动的，而第一列应该是静态的。

我当前获得的输出屏幕截图，其中包含具有许多列的行的第二列彼此堆叠，而不是提供滚动选项。

Answer 1

不确定我是否理解你的问题，但你可以使用 position: fixed 来修复第一行。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="clr-row ">
  <div class="clr-col-2" style="background-color:aqua; position:fixed; width:100%; top:0;">
    <span>.</span>
  </div>
  <div class="clr-col-10" style="overflow-x:auto; width:100%; white-space:nowrap;">
    <div class="clr-row">
      <div class="clr-col" style="background-color:rebeccapurple">
        <span>1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 </span>
      </div>
      <div class="clr-col" style="background-color:brown;">
        <span>2 2 2 2 2</span>
      </div>
      <div class="clr-col" style="background-color:burlywood;">
        <span>3 3 3 3 3 3 3 3 3 3 3 3 3 3</span>
      </div>
      <div class="clr-col" style="background-color:cadetblue;">
        <span>4 4 4 4 4 </span>
      </div>
      <div class="clr-col" style="background-color:deeppink;">
        <span> 5 5 5 5 5 5 5 5 5 5 5 5 5 5</span>
      </div>
      <div class="clr-col" style="background-color:greenyellow;">
        <span>6 6 6 6 6 </span>
      </div>
      <div class="clr-col" style="background-color:orange;">
        <span>7 7 7 7 7 7 7 7 7 7 7 7 7 7</span>
      </div>
      <div class="clr-col" style="background-color:black;">
        <span>8 8 8 8 8 8 </span>
      </div>
      <div class="clr-col" style="background-color:dimgrey;">
        <span>9 9 9 9 9 9 9 9 9 9 9 9 9 9</span>
      </div>
      <div class="clr-col" style="background-color:palegoldenrod;">
        <span>0 0 0 0 0 0 </span>
      </div>
      <div class="clr-col" style="background-color:lightcoral;">
        <span>1 1 1 1 1 1 1 1 1 1 1 1 1 1</span>
      </div>
      <div class="clr-col" style="background-color:wheat;">
        <span>2 2 2 2 2 2 </span>
      </div>
      <div class="clr-col" style="background-color:teal;">
        <span>3 3 3 3 3 3 3 3 3 3 3 3 3 3 </span>
      </div>
      <div class="clr-col" style="background-color:Highlight;">
        <span>4 4 4 4 4 4 </span>
      </div>
    </div>
  </div>
</div>