Question

我正在尝试用几部分文字制作一个盒子。每个部分的左侧都有一个浮动标签。但是，我遇到了一个问题，其中文本的结尾溢出到下一部分。
有办法防止这种情况吗？

.punktBox {
    width: 550px;
    margin-bottom: 15px;
    font-size: 1.1em;
    display: flex;
    flex-wrap: wrap;
}

.punktSection, .punktSectionHalf {
    font-size: 1em;
    padding: 2px 10px;
    min-height: 24px;
    display: inline-block;
    width: 100%;
    flex: 0 1 auto;
}
.punktSecLabel {
    float: left;
    height: 100%;
    min-width: 100px;
    font-weight: bold;
}

<div class="punktBox">
  <div class="punktSection">
    <div class="punktSecLabel">Desc: </div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis, felis id euismod lacinia, ligula sapien consequat augue, sed volutpat felis ipsum ut ipsum. In hac habitasse platea dictumst. Nunc porttitor nisl a suscipit suscipit.<i> (3 min lub mniej) </i>
  </div>
  <div class="punktSectionHalf">
    <div class="punktSecLabel">Person: </div>John Doe
  </div>
  <div class="punktSection">
    <div class="punktSecLabel">Lorem: </div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</div>

Answer 1

我建议只使用inline-flex并将您的内容放在<p>或<div>元素中，否则它将中断。

.punktBox {
    width: 550px;
    margin-bottom: 15px;
    font-size: 1.1em;
    display: flex;
    flex-wrap: wrap;
}

.punktSection, .punktSectionHalf {
    font-size: 1em;
    padding: 2px 10px;
    min-height: 24px;
    display: inline-flex;
    width: 100%;
    flex: 0 1 auto;
}
.punktSecLabel {
    height: 100%;
    min-width: 100px;
    font-weight: bold;
}

<div class="punktBox">
  <div class="punktSection">
    <div class="punktSecLabel">Desc: </div><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis, felis id euismod lacinia, ligula sapien consequat augue, sed volutpat felis ipsum ut ipsum. In hac habitasse platea dictumst. Nunc porttitor nisl a suscipit suscipit.<i> (3 min lub mniej) </i></div>
  </div>
  <div class="punktSectionHalf">
    <div class="punktSecLabel">Person: </div><div>John Doe</div>
  </div>
  <div class="punktSection">
    <div class="punktSecLabel">Lorem: </div><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  </div>
</div>

Answer 2

您正在寻找display: inline-block，而不是.punktSection和.punktSectionHalf上的display: inline-flex：

.punktBox {
    width: 550px;
    margin-bottom: 15px;
    font-size: 1.1em;
    display: flex;
    flex-wrap: wrap;
}

.punktSection, .punktSectionHalf {
    font-size: 1em;
    padding: 2px 10px;
    min-height: 24px;
    display: inline-flex;
    width: 100%;
    flex: 0 1 auto;
}
.punktSecLabel {
    float: left;
    height: 100%;
    min-width: 100px;
    font-weight: bold;
}

<div class="punktBox">
  <div class="punktSection">
    <div class="punktSecLabel">Desc: </div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis, felis id euismod lacinia, ligula sapien consequat augue, sed volutpat felis ipsum ut ipsum. In hac habitasse platea dictumst. Nunc porttitor nisl a suscipit suscipit.<i> (3 min lub mniej) </i>
  </div>
  <div class="punktSectionHalf">
    <div class="punktSecLabel">Person: </div>John Doe
  </div>
  <div class="punktSection">
    <div class="punktSecLabel">Lorem: </div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</div>

Answer 3

您的问题是您的punktSecLabel上有一个float:left。只需将其远程，然后在您的punktSection上添加一个display:flex;即可。您的内容还必须包裹在更大的div中。

希望有帮助！

.punktBox {
    width: 550px;
    margin-bottom: 15px;
    font-size: 1.1em;
    display: flex;
    flex-wrap: wrap;
}

.punktSection, .punktSectionHalf {
    font-size: 1em;
    padding: 2px 10px;
    min-height: 24px;
    display: inline-block;
    width: 100%;
    flex: 0 1 auto;
    display:flex;
}
.punktSecLabel {
    height: 100%;
    min-width: 100px;
    font-weight: bold;
}

<div class="punktBox">
  <div class="punktSection">
    <div class="punktSecLabel">Desc: </div><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis, felis id euismod lacinia, ligula sapien consequat augue, sed volutpat felis ipsum ut ipsum. In hac habitasse platea dictumst. Nunc porttitor nisl a suscipit suscipit.<i> (3 min lub mniej) </i></div>
  </div>
  <div class="punktSectionHalf">
    <div class="punktSecLabel">Person: </div>John Doe
  </div>
  <div class="punktSection">
    <div class="punktSecLabel">Lorem: </div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</div>

如何制作文本的浮动标签？

3 个答案: