Question

我在div内有多个跨度，但都在同一行。我想在新行上写每个跨度。这是html代码：

.divContent {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  bottom: 5%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 2;
  opacity: .8
}

.divContent span {
  font-size: 0.875rem;
  color: #4D575D;
  margin: 0 3px;
}

<div id="content" class="divContent">
  <span>Span 1</span>
  <span>Span 2</span>
  <span>Span 3</span>
</div>

现在此代码的结果是：跨度1跨度2跨度3

但是我想要

跨度1

跨度2

Span 3

Answer 1

将direction更改为column：

.divContent {
  position: absolute;
  display: flex;
  flex-direction: column; /*added this */
  width: 100%;
  bottom: 5%;
  justify-content: center;
  align-items:center; /*added this if you want centring*/
  z-index: 2;
  opacity: .8
}

.divContent span {
  font-size: 0.875rem;
  color: #4D575D;
  margin: 0 3px
}

<div id="content" class="divContent">
  <span>Span 1</span>
  <span>Span 2</span>
  <span>Span 3</span>
</div>

Answer 2

您可以使用样式表中display类中定义的.divContent属性来达到预期的效果。

.divContent {
  position: absolute;
  display: grid; /* changed here */
  /* YOU CAN ALSO USE inline-grid HERE */
  width: 100%;
  bottom: 5%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 2;
  opacity: .8
}
.divContent span {
  font-size: 0.875rem;
  color: #4D575D;
  margin: 0 3px
}

<div id="content" class="divContent">
        <span>Span 1</span>
        <span>Span 2</span>
        <span>Span 3</span>
</div>

Answer 3

另一种 flexbox 的实现方式包括let ... #"Added Conditional Column" = Table.AddColumn(#"Moved Prefix", "Custom", each (if Text.Contains([Group Membership], "Japanese Language") then "Japanese, " else "") & (if Text.Contains([Group Membership], "English Language") then "English, " else "") & ... ) in #"Added Conditional Column"和flex-wrap: wrap以及您选择的值（以下说明）：

flex-basis

.divContent {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap; /* enables wrapping of flex-items (default: "nowrap") */
  width: 100%;
  bottom: 5%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 2;
  opacity: .8;
}

.divContent span {
  flex-basis: calc(50% - 5.99px); /* initial width; needs to be at least 50.01% to make it work (if there are no left/right margins), else "calc(50% - 5.99px)" is enough in this case (- 2 * 3px left/right margin = - 6px, so a little bit more to push the others and force them to wrap) */
  flex-basis: 100%; /* but for simplicity's sake just make it 100% so they take full parent's width */
  text-align: center; /* added */
  font-size: 0.875rem;
  color: #4D575D;
  margin: 0;
  margin: 0 3px;
}

Answer 4

添加中断标签也可以！！！

   <div id="content" class="divContent">
    <span>Span 1</span> <br>
    <span>Span 2</span> <br>
    <span>Span 3</span> <br>
  </div>

Answer 5

只需添加显示：块；跨度

.divContent {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  flex-direction: column;
  display: flex;
  width: 100%;
  bottom: 5%;
  z-index: 2;
  opacity: .8
}
.divContent span {
  font-size: 0.875rem;
  color: #4D575D;
  margin: 0 3px;
}

<div id="content" class="divContent">
  <span>Span 1</span>
  <span>Span 2</span>
  <span>Span 3</span>
</div>

如何在新行上创建跨度？

5 个答案: