时间戳

首页 > 解决方案 > 通过 slde 将同一侧并排显示为两行

html - 通过 slde 将同一侧并排显示为两行

问题描述

我使用了一个代码，如下所述。我需要并排显示 div 中的内容，而不是向下显示。我无法更改 div，因为 div 实际上是按时间重复的。在我的代码中，我写的第一个 div 是重复的，所以我不能更改 div，第一个 div 中的任何更改也反映在其他 div 中。请为此提供解决方案。先感谢您。

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

.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;
}
</style>

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

标签： htmlstyles

解决方案

放置一个包装器your_container并将包装器样式设置为display: flex.

CSS：

.main-wrapper {
    display: flex;
}
.your_container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 50%; /* width of the container */
    padding: 0 15px; /* to add spaces  between container */
}

.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：

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

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

    </div>
</div>

推荐阅读