css - 如果太宽则将 float div 放到下一行

Question

我有一个包含键值对信息的框。如果值框太宽并且遇到键框，那么值框必须下拉到键框下方

https://jsfiddle.net/nwpems8w/

第三行的值一定要下拉到key box下面？如何做到这一点？

.box {
  background: #aaa;
  width: 150px;
}
.box_prop {
  clear: both;
  text-align: right;
}
.box_key {
  float: left;
}
.box_value {
  font-weight: bold;
}

<div class="box">
  <div class="box_prop">
    <div class="box_key">key</div>
    <div class="box_value">value</div>
  </div>
  <div class="box_prop">
    <div class="box_key">key long</div>
    <div class="box_value">value long</div>
  </div>
  <div class="box_prop">
    <div class="box_key">key giga long</div>
    <div class="box_value">value giga long</div>
  </div>
</div>

Answer 1

在 .box-value 上使用 float: right 并在父级上设置布局。

.box_value {
    float: right;
}

.box {
  background:#aaa;
  width:150px;
}

.box_prop {
  overflow: hidden;
}

.box_key {
  float:left;
}

.box_value {
  font-weight:bold;
  text-align: right;
  float: right;
}

<div class="box">
  <div class="box_prop">
    <div class="box_key">key</div>
    <div class="box_value">value</div>
  </div>
  <div class="box_prop">
    <div class="box_key">key long</div>
    <div class="box_value">value long</div>
  </div>
  <div class="box_prop">
    <div class="box_key">key giga long</div>
    <div class="box_value">value giga long value giga longvalue giga long</div>
  </div>
</div>