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>

致以最诚挚的问候，

George S.

Answer 1

我不确定我是否理解正确，但这是实现它的一种解决方案。如果它是white-space: nowrap或inline元素，此解决方案会强制将box的每个子元素放在一行（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%;
}

使用可滚动功能将两个div彼此相邻对齐

1 个答案: