html - 具有固定元素的仅 CSS 滑块

Question

是否可以在不添加容器的情况下创建以下布局？固定元素是不可滚动的，可滚动的元素可以左右滑动。

布局：

-------------------------------------------------- ----- 

| 固定 | 固定 < 可滚动 | 可滚动 | 可滚动 >

 -------------------------------------------------- -----

标记：

<section class="fixed">
    <h3>Item1</h3>
</section>
<section class="fixed">
    <h3>Item2</h3>
</section>
<section class="scrollable">
    <h3>Item2</h3>
</section>
<section class="scrollable">
    <h3>Item2</h3>
</section>
<section class="scrollable">
    <h3>Item2</h3>
</section>

Answer 1

你的意思是这样的吗。如果是这样，您必须添加以下css。

section {
    display:inline-block;
}

.fixed {
    width: 80px;
}

.scrollable {
    overflow-x:scroll;   
    width: 80px;
}