水平滚动使 div 位于下方

Question

我正在尝试制作一个横向滚动的网站。这是基本布局

<body>
 <div class="wrapper">
  <div class="page">
    <h3>Page 1</h3>
      <img src="../images/logonew.png">
  </div>
  <div class="page">
    <h3>Page 2</h3>
  </div>
  <div class="page">
    <h3>Page 3</h3>

而 CSS 是

.page{display: inline-block;}.wrapper{
white-space: nowrap;
overflow-y: hidden; // hide vertical
overflow-x: auto;
min-width: 100%;}

我遇到的问题是这个

https://drive.google.com/file/d/0BwJbQuRrRywLMW9vVzNOQ2xmczQ/view?usp=sharing

如您所见.. 第 2 页 header 和第 3 页 header 低于第 1 页。我希望它们都在一行中。

它也可能真的很笨所以请耐心等待。

提前致谢。

Answer 1

inline-block 的默认对齐方式是基线...您只需将其设置为 top。

.page {
  display: inline-block;
  vertical-align: top;
}

<div class="wrapper">
  <div class="page">
    <h3>Page 1</h3>

    <img src="../images/logonew.png" />
  </div>
  <div class="page">
    <h3>Page 2</h3>

  </div>
</div>

水平滚动使 div 位于下方

Horizontal scroll making div place below

html

css

horizontal-scrolling