文本在响应块中的位置

Question

有一个带有文字的块。我需要在文本中留一些比现在更多的文字，并且需要及时响应。我是这样写的：

.sliderr__item .slid {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-size: 24px;
  text-align: left;
  align-items: flex-start;
  justify-content: flex-start;
}


/*END*/

.sliderr {
  background-color: #fff;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.sliderr__wrapper {
  display: flex;
  transition: transform 0.6s ease;
  /* ADDED: */
  margin-bottom: 10px;
}

.sliderr__item {
  flex: 0 0 50%;
}

<div class="sliderr"><br>
  <div class="sliderr__wrapper">
    <div class="sliderr__item" style="border: 1px solid #DCE2EC;">
      <div style="height: 250px;" class="slid">
        <p>Lorem Ipsum</p><br>
        <p>Lorem Ipsum<br>
          <span>Lorem Ipsum</span></p>
        <p>Lorem Ipsum<span>21.08.2018</span></p>
      </div>
    </div>
  </div>
</div>

我需要在Lorem Ipsum text和日期21.08.2018之间留一些空间，但是我对此有一些疑问。

Answer 1

.sliderr__item .slid {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-size: 24px;
  text-align: left;
  align-items: flex-start;
  justify-content: flex-start;
}


/*END*/

.sliderr {
  background-color: #fff;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.sliderr__wrapper {
  display: flex;
  transition: transform 0.6s ease;
  /* ADDED: */
  margin-bottom: 10px;
}

.sliderr__item {
  flex: 0 0 50%;
}

.sliderr .date {
  display: inline-block;
  margin-left: 1em;
}

<div class="sliderr"><br>
  <div class="sliderr__wrapper">
    <div class="sliderr__item" style="border: 1px solid #DCE2EC;">
      <div style="height: 250px;" class="slid">
        <p>Lorem Ipsum</p><br>
        <p>Lorem Ipsum<br>
          <span>Lorem Ipsum</span></p>
        <p>Lorem Ipsum <span class="date">21.08.2018</span></p>
      </div>
    </div>
  </div>
</div>

如果要使用常规空格，只需在HTML代码中添加空格。

如果要在“ Lorem Ipsum”和日期之间留出更大的空间，请将跨度设置为display: inline-block（默认值为inline），然后应用所需的margin-left < / p>

Answer 2

之前：

之后：

解决方案A：

您可以添加空间。替换

<p>Lorem Ipsum<span>21.08.2018</span></p>

通过：

<p>Lorem Ipsum <span>21.08.2018</span></p>

解决方案B：

使用CSS且在内容之前。

HTML：

<p>Lorem Ipsum<span class="bspace">21.08.2018</span></p>

CSS：

.bspace:before {
    content:" ";
}

喜欢：

.bspace:before {
  content: " ";
}

.sliderr__item .slid {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-size: 24px;
  text-align: left;
  align-items: flex-start;
  justify-content: flex-start;
}


/*END*/

.sliderr {
  background-color: #fff;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.sliderr__wrapper {
  display: flex;
  transition: transform 0.6s ease;
  /* ADDED: */
  margin-bottom: 10px;
}

.sliderr__item {
  flex: 0 0 50%;
}

<div class="sliderr"><br>
  <div class="sliderr__wrapper">
    <div class="sliderr__item" style="border: 1px solid #DCE2EC;">
      <div style="height: 250px;" class="slid">
        <p>Lorem Ipsum</p><br>
        <p>Lorem Ipsum<br>
          <span>Lorem Ipsum</span></p>
        <p>Lorem Ipsum<span class="bspace">21.08.2018</span></p>
      </div>
    </div>
  </div>
</div>