我正在尝试制作横向滚动网站。这是基本布局
<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页。我希望它们都在一行中。
也可能真的很蠢,所以请耐心等待。
提前致谢。
答案 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>