html - CSS - 带有 6 个固定分隔符的 5 个流体列，如何使它们等于包含 div 的 100%？

Question

我试图实现一种设计，它有五列，宽度可变，但也包含分隔符 div(带有背景图像，因此它们的大小是固定的)。必须有一种方法让这些列 + 分隔符等于 100% 宽度，这样我就可以让页脚正确地扩展和收缩内容。

我查看了固定 div float 相对于流体 div 的代码，但似乎无法将负边距的想法扩展到具有 6 个固定分隔符 div 的 5 个流体列。

这是我的..

<div class="content">
 <div id="column-container">
  <div class="sep"></div>
  <div class="col_one"></div>
  <div class="sep1"></div>
  <div class="col_two"></div>
  <div class="sep2"></div>
  <div class="col_three"></div>
  <div class="sep3"></div>
  <div class="col_four"></div>
  <div class="sep4"></div>
  <div class="col_five"></div>
  <div class="sep5"></div>
 </div>
 <div class="footer">
 </div>
</div>

CSS 有点像

.sep{
width:26px;
position:relative;
margin-top:-20px;
height:1113px;
float:left;
background-image:url('images/sep.png');
} // other sep divs are the same just using a different sep background
#column-container .col_one,#column-container .col_two,
#column-container .col_three,#column-container .col_four,
#column-container .col_five{
height:1090px;
overflow:hidden;
margin: 0 auto; 
width: 16.8%; 
float: left;
}
#content{
min-width:975px;
width:80%;
margin: 0 auto;
}

Answer 1

选项#1:用一周剩下的时间尝试弄清楚如何在 javascript 中执行此操作，永远不要对结果完全满意。

选项 #2:稍微更改 html 结构。

<style type="text/css">
    #main_container {
        background-image:url('images/sep.png');
        background-repeat:repeat-y;
        padding-left:26px;
        overflow:hidden;
    }
    .column {
        width:20%;
        float:left;
        background-image:url('images/sep.png');
        background-repeat:repeat-y;
        background-position:top right;
    } .column_padder {
        padding:4px 30px 4px 4px;
    }
</style>

<div id="main_container">
    <div class="column"><div class="column_padder">Lorem ipsum de color sit amet. Consectatur adipising elit.</div></div>
    <div class="column"><div class="column_padder">Cut back on those dirty cheeseburgers, Randy!</div></div>
    <div class="column"><div class="column_padder">asdf</div></div>
    <div class="column"><div class="column_padder">asdf</div></div>
    <div class="column"><div class="column_padder">asdf</div></div>
</div>