html - 使用可滚动功能将两个 div 彼此对齐

Question

我开始学习 HTML/CSS，但在对齐可滚动 div 中的两个 div 时遇到了问题。为了更好地理解，我将分享我的代码。如果有人可以帮助我，我将非常感激。提前谢谢你。

想法是每个“Test”类都具有 100% 的宽度，并且在一行中一个接一个地对齐，而“Box”类具有可滚动的特性。

.Wrapper{
  position:relative;
  width:90vw;
  background-color:blue;
}

.Box{
  display;
  position:relative;
  width:100%
  overflow-x:scroll;
}

.Test{
  width:100%;
  background-color:red;
}

<div class="Wrapper">
  <div class="Box">
      <div class="Test">
        Test 1  
      </div>
      <div class="Test">
        Test 2  
      </div>
  </div>
</div>

最好的问候，

乔治·S.

Answer 1

我不确定我是否理解正确，但这是实现它的一种解决方案。如果它是 inline 或 inline-block 元素。这是一个 jsFiddle:https://jsfiddle.net/rq98w432/1/

HTML:

<div class="Box">
    <div class="Test">
      Test 1  
    </div>
    <div class="Test">
      Test 2  
    </div>
</div>

CSS:

.Box{
  width:90vw;
  background-color:blue;
  white-space: nowrap;
  overflow-x:scroll;
  color: white;
  padding: 10px;
}

.Test {
  display: inline-block;
  width: 100%;
}