html - 如何将div放在不同的行中而不占用每行的整个宽度？

Question

我认为可以取消设置此元素以不阻塞空间，但我不知道要使用哪个 CSS 代码来做到这一点。下面是我的代码:

.customLabel{
    width: 300px;
    text-align: right;
    font-size: 0.9em;
    font-weight: bold;
    border: 1px solid black
}

.customLabel>div{
    background: #f0ad4e;
    margin-bottom: 5px;
    padding: 1px 5px;
    border-radius: 3px;
}

<div class="customLabel">
  <div class=''>hello</div>
  <div class=''>hi hi hi hi </div>
  <div class=''>god</div>
</div>

我想要的就是这张图片

所以如果有人可以帮助我。提前谢谢你。

Answer 1

将 div 向右浮动并添加 clear:both。您需要使用 clearfix 以便包含 float ...这里我在父包装器上使用了 overflow:hidden。

.customLabel {
  width: 300px;
  text-align: right;
  font-size: 0.9em;
  font-weight: bold;
  border: 1px solid black;
  overflow: hidden;
}
.customLabel>div {
  background: #f0ad4e;
  margin-bottom: 5px;
  padding: 1px 5px;
  border-radius: 3px;
  float: right;
  clear: both;
}

<div class="customLabel">
  <div class=''>hello</div>
  <div class=''>hi hi hi hi</div>
  <div class=''>god</div>
</div>