Question

我需要第三个div来拉伸剩余的宽度（100％）。在其他两个div上尝试了几个像float:left这样的解决方案，但它没有用。如果我将第三个div设置为100％，它会显示在其他两个div之下，但它应该保持在同一行。

＆＃13;

.ui-tablewrapper {
    position: relative;
    width: 100%;
    color: #000;
    font-size: 0;
}
.ui-tablebanner {
    display: inline-block;
    margin-right: 1px;
    color: #000;
    border: 1px solid #000;
    height: 25px;
    font-size: .75rem;
}
#ui-tablebanner-30 {
    width: 30px;
}
#ui-tablebanner-26 {
    width: 26px;
}

＆＃13;

<div class="ui-tablewrapper">
    <div class="ui-tablebanner" id="ui-tablebanner-30">1</div>
    <div class="ui-tablebanner" id="ui-tablebanner-26">2</div>
    <div class="ui-tablebanner" id="ui-tablebanner">3</div>
</div>

＆＃13;

Answer 1

方法1 - 使用float。将前2个项目设为float:left，将第3个项目设为overflow:auto。浏览器支持超级 IE6 + 。

＆＃13;

.row {
    overflow: auto;
}
.item {
    float: left;
    border: 1px solid;
    margin-right: 1px;
    width: 30px;
}
.item:last-child {
    float: none;
    overflow: auto;
    width: auto;
    margin-right: 0;
}

＆＃13;

<div class="row">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

＆＃13;

方法2 - 使用CSS table布局。最后一个单元格将自动占用所有可用宽度。浏览器支持很棒 IE8 + 。

＆＃13;

.row {
    display: table;
    border-collapse: separate;
    border-spacing: 1px 0;
    width: 100%;
}
.item {
    display: table-cell;
    vertical-align: top;
    border: 1px solid;
    width: 30px;
}
.item:last-child {
    width: auto;
}

＆＃13;

<div class="row">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

＆＃13;

方法3 - 使用inline-block和calc()进行数学计算，请注意所有边框，填充和边距都要计算在内。浏览器支持很好 IE9 + 。

＆＃13;

.row {
    font-size: 0; /*remove inline gaps*/
}
.item {
    font-size: 16px; /*reset font size*/
    display: inline-block;
    vertical-align: top;
    border: 1px solid;
    margin-right: 1px;
    width: 30px;
}
.item:last-child {
    width: calc(100% - 68px); /*do the math*/
    margin-right: 0;
}

＆＃13;

<div class="row">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

＆＃13;

Answer 2

您可以绝对定位块，将每个块的左边缘和最后一个块的右边缘设置为0：

.ui-tablebanner {
    box-sizing: border-box;
    position: absolute;
}

#ui-tablebanner-26 {
    width: 26px;
    left: 31px;

}

#ui-tablebanner-30 {
    width: 30px;
    left: 0;
}

#ui-tablebanner {
    left: 58px;
    right: 0;
}

这是一个工作小提琴：https://jsfiddle.net/7tgfmou2/1/

另外，我还建议使用box-sizing: border-box来更轻松地进行宽度计算，https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing。还有像Sass这样的CSS预处理器http://sass-lang.com/，允许您在位置计算中使用变量。示例：#ui-tablebanner { left: $banner-26-width + $banner-30-width + ($banner-margin*2);...

Answer 3

如果您想要最新的方法，那就flexbox。

＆＃13;

.ui-tablewrapper {
  color: #fff;
  display: flex;
}
.ui-tablebanner {
  color: #000;
  border: 1px solid #000;
  height: 25px;
  font-size: .75rem;
  flex: 0 0 auto
}
#ui-tablebanner-26 {
  flex-basis: 26px;
  background: red;
}
#ui-tablebanner-30 {
  flex-basis: 30px;
  background: blue;
}
#ui-tablebanner {
  flex-grow: 1;
  background: green;
}

＆＃13;

<div class="ui-tablewrapper">
  <div class="ui-tablebanner" id="ui-tablebanner-30">1</div>
  <div class="ui-tablebanner" id="ui-tablebanner-26">2</div>
  <div class="ui-tablebanner" id="ui-tablebanner">3</div>
</div>

＆＃13;

如何使一列采取所有剩余的宽度？

3 个答案: