水平滚动制作div位于

时间:2015-07-25 08:14:08

标签: html css horizontal-scrolling

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

<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

正如你所看到的那样......标题和标题低于第1页。我希望它们都在一行中。

也可能真的很蠢,所以请耐心等待。

提前致谢。

1 个答案:

答案 0 :(得分: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>