Question

我有一个块打印出带有许多换行符的复杂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.

我该如何做到这一点？

Answer 1

您可以使用灵活的方框：

#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>

Answer 2

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

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

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

2 个答案: