Question

我的设计应该是：
左侧容器200px
中型集装箱动态
右容器200px

这意味着midde容器应该尽可能宽，特别是当用户调整浏览器大小时我知道我描述的是一个完美的桌子，左边和右边的td宽度= 200，中间td没有宽度，中间完全调整到屏幕的scretch。
但由于给定的原因，我必须在这里使用Div容器而不是表格。

那怎么办呢？

Answer 1

您可以使用display: table来复制具有div的表行为，如下所示：

<div class="wrapper">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

.wrapper {
  display: table;
  width: 100%;
}
.wrapper div {
  display: table-cell;
}
.left {
  width: 200px;
}
.right {
   width: 200px;
}

Demo @ CodePen

Answer 2

您可以将calc（）方法用于中间容器，如：

width: calc(100% - 400px);

示例here。

Answer 3

给中间一个margin: 0 200px;

左边的一个：margin-right: -200px;

正确的：margin-left: -200px;

让他们漂浮。确保将外部宽度设置为200px。

Answer 4

首先，您将所有divs定义为display: inline-block，然后为宽度为200px的左右divs设置样式并让它们浮动。然后将容器宽度设置为所需的宽度。

<div class='container'>
    <div class='right'>
        col3
    </div>
    <div class='left'>
        col1
    </div>
    <div class='middle'>
        col2
    </div>
</div>

然后给中间一个margin: 0 200px;

左边的一个：margin-right: -200px;

正确的：margin-left: -200px;

div的动态宽度在2个其他div之间？

4 个答案: