如果太宽，将浮动div拖到下一行

Question

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

https://jsfiddle.net/nwpems8w/

第三行的值必须在密钥框下面下拉？怎么做？

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

.box_value {
    float: right;
}

＆＃13;

＆＃13;

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

.box_prop {
  overflow: hidden;
}

.box_key {
  float:left;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用Flexbox执行此操作，只需使用flex-wrap: wrap上的.box_prop

.box {
  background: #aaa;
  width: 150px;
}
.box_prop {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.box_value {
  font-weight: bold;
}
.box_value {
  margin-left: auto;
}

<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>