如何获得一个块来水平打印复杂的 div？答案

【问题标题】：How can I get a block to print complicated divs horizontally?如何获得一个块来水平打印复杂的 div？
【发布时间】：2015-02-17 15:59:48
【问题描述】：

我有一个块可以打印出带有许多换行符的复杂 div，我希望它可以水平打印。为简单起见，我只是尝试使用以下代码：

html

<div id="body">
  <% Model.each do |f| %>
    <div id="item">This is <br> a test.</div>
  <% end %>
</div>

css

#body {
  #item {
    position: relative;
    display: inline;
  }
}

显然，display: inline; 使下一个项目从最后一个项目结束的点开始。所以现在，它打印出来是这样的：

This is
a test. This is
  a test. This is
    a test.

但我希望下一项始终从容器顶部开始，如下所示：

This is     This is     This is
a test.     a test.     a test.

我怎样才能做到这一点？

【问题讨论】：

display: inline-block 应该会有所帮助。
@emmanuel 它有效！谢谢！
很高兴听到这个消息，不客气！
@emmanuel 如果您将其添加为答案，我可以接受并给您声誉:)

标签： html css position block positioning

【解决方案1】：

将 display 从 inline 更改为 inline-block 应该会有所帮助。

#body {
  #item {
    position: relative;
    display: inline-block;
  }
}

【讨论】：

【解决方案2】：

您可以使用灵活的盒子：

#body {
    display: flex;
    flex-wrap: nowrap; /* default value */
}

这样子元素将水平显示，不换行，即使这意味着会溢出。

#body {
  display: flex;
}

<div id="body">
  <div id="item">This is <br> a test.</div>
  <div id="item">This is <br> a test.</div>
  <div id="item">This is <br> a test.</div>
  <div id="item">This is <br> a test.</div>
  <div id="item">This is <br> a test.</div>
  <div id="item">This is <br> a test.</div>
  <div id="item">This is <br> a test.</div>
  <div id="item">This is <br> a test.</div>
  <div id="item">This is <br> a test.</div>
  <div id="item">This is <br> a test.</div>
  <div id="item">This is <br> a test.</div>
  <div id="item">This is <br> a test.</div>
  <div id="item">This is <br> a test.</div>
  <div id="item">This is <br> a test.</div>
  <div id="item">This is <br> a test.</div>
  <div id="item">This is <br> a test.</div>
  <div id="item">This is <br> a test.</div>
  <div id="item">This is <br> a test.</div>
  <div id="item">This is <br> a test.</div>
  <div id="item">This is <br> a test.</div>
  <div id="item">This is <br> a test.</div>
  <div id="item">This is <br> a test.</div>
  <div id="item">This is <br> a test.</div>
  <div id="item">This is <br> a test.</div>
  <div id="item">This is <br> a test.</div>
  <div id="item">This is <br> a test.</div>
  <div id="item">This is <br> a test.</div>
  <div id="item">This is <br> a test.</div>
  <div id="item">This is <br> a test.</div>
  <div id="item">This is <br> a test.</div>
  <div id="item">This is <br> a test.</div>
  <div id="item">This is <br> a test.</div>
</div>

【讨论】：