使用滾動功能對齊兩個div彼此

Question

我開始學習HTML/CSS，並且在對齊滾動div中的兩個div時遇到問題。爲了更好地理解，我將分享我的代碼。如果有人能幫助我，我將非常感激。先謝謝你。

這個想法是每個「測試」類有100％的寬度，並連續對齊，而類「框」有一個可滾動的功能。

.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元素，此解決方案將強制每個子元素都位於一行中（white-space: nowrap）。這裏是一個的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%; 
}