我开始学习 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.
最佳答案
我不确定我是否理解正确,但这是实现它的一种解决方案。如果它是 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%;
}
关于html - 使用可滚动功能将两个 div 彼此对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36865051/