文本在响应块中的位置

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 之间有一些 space 但我对此有一些问题。

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>

如果您想要常规 space，只需在 HTML 代码中添加 space。

如果您想要 "Lorem Ipsum" 和日期之间更大的 space，请将跨度设置为 display: inline-block（其默认值为 inline）并应用所需的数量共 margin-left

Answer 2

之前：

之后：

解决方案 A：

您可以添加 space。替换

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

文本在响应块中的位置

Position of text in responsive block

html

css

responsive

之前：

之后：

解决方案 A：

解决方案 B：