修复了 5 个流体 DIV 旁边的 DIV

Question

我需要一个相当复杂的布局。我已经尝试了几个小时来解决这个问题，但仍然没有运气。我需要在 5 个流体 DIV 旁边有一个固定 div。

所有流体 DIV 需要是不同的百分比，但所有 6 个 DIV 组合（1 个固定 + 5 个流体）必须等于父 DIV 的宽度。父 div 的高度是固定的。

这就是我想要的：http://i.imgur.com/u0L6hrz.png

但这就是我现在所拥有的：http://jsfiddle.net/mnNzR/

我需要消除空格，以便所有 DIV 组合起来填充整个框。如果可能的话，我宁愿不使用 JS。任何帮助将不胜感激，谢谢。

<div class="parent">
    <div class="s1"></div>
    <div class="s2"></div>
    <div class="s3"></div>
    <div class="s4"></div>
    <div class="s5"></div>
    <div class="s6"></div>
</div>

Answer 1

您可以使用 CSS 实现布局，方法是将流体 divs 包装在带有 margin-left:150px; 的容器中。

那么你必须计算，使流体divs 宽度的总和等于 100%：

FIDDLE

HTML：

<div class="parent">
    <div class="s1"></div>
    <div class="fluid_wrap">
        <div class="s2"></div>
        <div class="s3"></div>
        <div class="s4"></div>
        <div class="s5"></div>
        <div class="s6"></div>
    </div>
</div>

CSS：

.parent {
    display:block;
    width: 100%;
    height: 150px;
    background-color: white;
    box-shadow: 0 0 5px 5px rgba(215, 44, 44, 0.9);
}
.s1 {
    width: 150px;
    height: 100%;
    display: block;
    background-color: #00baff;
    float: left;
}
.fluid_wrap {
    margin-left:150px;
    height:100%;
}
.s2 {
    width: 17.5%;
    height: 100%;
    display: block;
    background-color: #0090c5;
    float: left;
}
.s3 {
    width:12.5%;
    height: 100%;
    display: block;
    background-color: #006b93;
    float: left;
}
.s4 {
    width: 21%;
    height: 100%;
    display: block;
    background-color: #004660;
    float: left;
}
.s5 {
    width: 21%;
    height: 100%;
    display: block;
    background-color: #002939;
    float: left;
}
.s6 {
    width: 28%;
    height: 100%;
    display: block;
    background-color: #001720;
    float: left;
}