时间戳

首页 > 解决方案 > 响应块中文本的位置

html - 响应块中文本的位置

问题描述

有一个带有文本的块。我需要在其中看到比现在更靠左的文本，并且需要响应。我写了这个：

.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但我有一些问题。

标签： htmlcssresponsive

解决方案

.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

推荐阅读