html - 将多个 div float 到一行中

Question

我正在尝试制作这种宽度的 div:

.number {
  float: left;
  width: 50px;
}
.price {
  float: right;
  width: 50px;
}
.center {
  float: left;
  margin: 0 auto;
}
.clearfix:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}
.clearfix,.number,.center,.price,.extra {
  margin: 5px;
  padding: 5px;
  border: 3px #333 solid;
}

<div class="clearfix">
  <div class="number">Number</div>
  <div class="center">
    <div class="extra">Title</div>
    <div class="extra">Description. Description. Description. Description. Description.</div>
  </div>
  <div class="price">Price</div>
</div>

现在我们添加一个更长的描述，这就发生了

.number {
  float: left;
  width: 50px;
}
.price {
  float: right;
  width: 50px;
}
.center {
  float: left;
  margin: 0 auto;
}
.clearfix:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}
.clearfix,.number,.center,.price,.extra {
  margin: 5px;
  padding: 5px;
  border: 3px #333 solid;
}

<div class="clearfix">
  <div class="number">Number</div>
  <div class="center">
    <div class="extra">Title</div>
    <div class="extra">Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. </div>
  </div>
  <div class="price">Price</div>
</div>

我知道这在 CSS 中是不可能的，但有没有办法“伪造”“最大宽度:(100% - 100px)”或其他东西？

Answer 1

是的，有。您可以使用 calc方法:

max-width: calc(100% - 100px);

另外，检查 this在使用 calc 实现浏览器兼容性之前。