html - 具有自动宽度中心列的三列布局

Question

我正在尝试创建 3 列布局，其中结构应该是主列、左列、右列。主列是自动宽度以填充页面的其余部分。

不幸的是我无法更改 HTML，目前是这样的:

<div class="wrap">
  <div class="main"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>

是的:这意味着我无法更改 div 的顺序。

我找到了一些解决方案，其中之一是使用 display: table-cell，但是使用 float 时会出现问题。第二种解决方案是使用 flexbox 布局，这是一个很好的解决方案，但我不能使用它，因为 IE9 不支持这种 CSS 样式。

只是重申一下目标:我的需要是左右宽度固定，main 将填充其余的可用空间。

<---250px--><----------------自动宽度----------------><---200px ---
<---左-----><----------------主要----------------> <---对----->

有人在没有任何 JavaScript 的纯 CSS 中对此有任何解决方案吗？

Answer 1

给你。一个简单的 CSS 解决方案。请记住，您应该始终清除 float 。

HTML

    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
    <div class="clear"></div>

CSS

.main, .left, .right {
    min-height: 250px;
}
.left {
    float: left;
    background-color: green;
    width: 50px;    
}
.right {
    float: right;
    background-color: blue;
    width: 50px;    
}
.clear {
    clear: both;
}
.main {
    background-color: gray;
}

JSFiddle:http://jsfiddle.net/18rvc23q/