Question

我需要在两个其他元素之间放置一个元素。中间元素具有指定的宽度，但侧面元素必须自动计算其宽度（对于不同的屏幕宽度）。如果我添加左侧元素，它会完全忘记＆＃34; margin：0 auto＆＃34;在中间的一个，并在右边添加一个元素只是将它放在下面，因为中间的元素已经占据了空间＆＃34; float：right＆＃34;

我尝试过：

HTML：

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

CSS：

* {
    height: 200px;
}
.left {
    background: red;
    width: auto;
    overflow: hidden;
}
.middle {
    background: green;
    width: 400px;
    float: right;
}
.right {
    background: blue;
    width: auto;
    overflow: hidden;
}

这是JSFiddle显示它：http://jsfiddle.net/xnwv8scp/2/

Answer 1

您可以尝试使用flexbox：

＆＃13;

body {
  display: flex;  /* Magic begins */
}
.middle {
  width: 400px;   /* Specified width */
}
.left, .right {
  flex: 1;        /* Fill available space */
}
body > * {
  min-width: 0;   /* Widths ignore the content */
  height: 200px;
}
.left { background: red; }
.middle { background: green; }
.right { background: blue; }

＆＃13;

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

＆＃13;

Answer 2

这是适用于更多浏览器的CSS表格解决方案 - IE8 +

http://jsfiddle.net/xnwv8scp/3/

＆＃13;

body {
    display: table;
    width: 100%;
    height: 200px;
    margin: 0;
}
body > div {
    display: table-cell;
}
.left {
    background: red;
}
.middle {
    background: green;
    width: 400px;
}
.right {
    background: blue;
}

＆＃13;

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

＆＃13;

Answer 3

我认为以下内容与您想要的非常接近 - 根据需要调整溢出。

{{1}}

CSS三列，中间列固定宽度

3 个答案: