并排显示 div 内容答案

【问题标题】：displaying a div content side by side并排显示 div 内容
【发布时间】：2020-10-15 10:41:24
【问题描述】：

iam 使用 div 内容。此 div 重复显示输出为的次数

2 任何街道贝辛斯托克，英国，SP49 4ED

像这样。我需要并排显示，而不是在下方显示。

.wfte_invoice-main {
    color: #73879C;
    font-family: "Helvetica Neue", Roboto, Arial, "Droid Sans", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    box-sizing: border-box;
    width: 50%;
    margin: 0px;
}

请给我一个解决方案。提前谢谢你。

【问题讨论】：

标签： html styles

【解决方案1】：

据我了解，也许您可以使用display: flex 属性并将您的文本放在这样的段落标签中：

<div class="your_container">
  <p class="wfte_invoice-main">
    2 any street basingstoke, United Kingdom, SP49 4ED
  </p>
  <p class="wfte_invoice-main">
    2 any street basingstoke, United Kingdom, SP49 4ED
  </p>
  ...
</div>

.your_container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

代码框链接：CodeSandbox

【讨论】：

【解决方案2】：

div 是块元素，块元素默认显示在彼此下方。

如果你想让它们连续排序，只需添加

display: inline-block

到您的 div 类“wfte_invoice-main”。

另一种方法是在两个 div 周围包裹一个 flex-box-container。

<div class="wfte_invoice-container">
  <p class="wfte_invoice-main">
    2 any street basingstoke, United Kingdom, SP49 4ED
  </p>
  <p class="wfte_invoice-main">
    2 any street basingstoke, United Kingdom, SP49 4ED
  </p>
</div>

并添加以下样式：

 .wfte_invoice-container {
  display: flex;
  }

您可以通过添加 justify-content 和 align-items 的值来编辑容器的外观。

【讨论】：