Question

我试图将span移到新线上。

这是一个Codepen Demo，它最能说明问题。

我在spans中包含了很多动态内容。

HTML示例：

<span class="group">
  <span class="num">500</span>
  <span class="text">TEXT</span>
  <span class="sym">~</span>
  <span class="num2">50</span>
</span>

CSS ：

.group {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  margin-top: auto;
  align-self: flex-end;
}

不对HTML进行更改我只想将.num2移到新行。我认为添加display: block就足够了，但它没有效果，可能是由于flexbox造型？

欢迎任何建议，欢呼。

（注意：我现在不太担心伪元素的位置）

片段：

＆＃13;

.group {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  margin-top: auto;
  align-self: flex-end;
}
.num,
.text,
.sym {
  margin-left: .3em;
}
.num,
.text {
  display: inline-block;
}
.num2 {
  margin-left: .3em;
  /* display: block; // this doesn't work */
}

＆＃13;

<span class="group">
  <span class="num">500</span>
  <span class="text">TEXT</span>
  <span class="sym">~</span>
  <span class="num2">50</span>
</span>

＆＃13;

Answer 1

通过添加flexbox将flex-wrap: wrap和强制 num2添加到下一行，使flex-basis: 100% 换行它。

见下面的演示：

* {
  font-family: sans-serif;
}

body {
  width: 500px;
  margin: 20px auto 0;
}

.ideal {
  float: right;
}

.ideal p {
  margin-top: 0; 
}

.ideal p:nth-of-type(2)::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 6px solid black;
  margin-left: .3em;
}

.working {
  float: left;
}

.head {
  color: white;
  text-align: center;
  padding: 8px;
  margin-bottom: 10px;
}

.green {
  background-color: green;
}

.red {
  background-color: red;
}

.group {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  margin-top: auto;
  flex-wrap: wrap;
  align-self: flex-end;
}

.num,
.text,
.sym {
  margin-left: .3em;
}

.num,
.text {
  display: inline-block;
}

.num2 {
  margin-left: .3em;
  flex-basis: 100%;
}

.group::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 6px solid black;
  margin-left: .3em;
}

<div class="working">
  <div class="head red">What I have now</div>
  <span class="group">
  <span class="num">500</span>
  <span class="text">TEXT</span>
  <span class="sym">~</span>
  <span class="num2">50</span>
  </span>
</div>

如何将此跨度移动到自己的行？

1 个答案: