使内联块元素保持在同一行

Question

我有一个简单的网站：

• 我定义了两个小班：row和column。
• 我有一行两列的HTML。

我想强制确保列出现在同一行，即使它超出了屏幕的界限。

以下是页面缩小时的显示方式（显然，它们不像我希望的那样位于同一水平线上）：

以下是使用代码重现/播放的Codepen：

https://codepen.io/maxpleaner/pen/KmXbRX

这是HTML标记（使用.slim预处理器）：

#examples
  #example-1.row
    iframe.column{
      src='http://localhost:3000'
    }
    .explanation.column on the left is an iframe

这里是样式（使用.sass预处理器）

  body, html
    width: 100%
    height: 100%
    overflow-x: scroll

  @mixin cell-height
    height: 300px

  @mixin cell-width
    width: 300px

  @mixin inline-block
    display: inline-block

  @mixin nowrap
    whitespace: nowrap

  @mixin default-spacing
    padding: 10px
    margin: 10px

  .row
    display: block

  .column
    border: 1px solid black
    @include cell-width
    @include cell-height
    @include inline-block
    @include nowrap
    @include default-spacing

我应该提一下，我尝试将float: left添加到.column样式中。当页面缩小时，它看起来是正确的 ，但在移动设备上它仍然显示在两行上。如果它不合适，我希望它水平拉伸页面（因此用户必须向左/向右滚动）。

Answer 1

您可以使用容器demo上的display: inline-block / inline强制white-space: nowrap项目保持在同一行：

.row
  display: block
  white-space: nowrap

或者使用你所拥有的@include nowrap mixin。

此外，正如Chris's answer中所建议的那样，您应该使用以下两个元素对齐：

.explanation.column
  vertical-align: top

Answer 2

只需添加以下规则：

.explanation.column
  vertical-align: top

https://codepen.io/anon/pen/pPWqQa