Question

我试图制作这个宽度div：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

现在我们添加更长的描述，这种情况发生了

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

我知道这在CSS中是不可能的，但是有没有办法假装＆＃39; ＆＃34; max-width：（100％ - 100px）＆＃34;还是什么？

Answer 1

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

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

另外，在使用calc进行浏览器兼容性之前，请检查this。

Answer 2

如果Calc兼容性不适合您，您可以使用css table-layout而不是float。外柱上的固定尺寸，中间的尺寸将填充。

.clearfix {display: table; width: 100%;}
.number {display: table-cell; width: 50px;}
.center {display: table-cell;}
.price {display: table-cell; width: 50px;}

https://jsfiddle.net/j4mxzgra/

将多个div重新划分为一行

2 个答案: