並排顯示 div 內容

Question

我正在使用一個 div 內容。這個 div 重復顯示輸出的次數

2 任何街道貝辛斯托克，英國，SP49 4ED

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;
}

請給我一個解決方案。 先感謝您。

Answer 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

Answer 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 添加值來編輯容器的外觀。