Css 固定5个流体DIV旁边的DIV

我需要一个相当复杂的布局。我已经试了几个小时想弄明白这一点，但还是没有运气。我需要一个固定的div旁边的5个流体div

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

以下是我想要的：

但我现在的情况是：

我需要删除空格，这样所有的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>

---

您可以使用CSS实现布局，方法是将流体

div

s包装在一个容器中，容器的左边距为

150px

然后必须计算流体的宽度之和等于100%：


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>

.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;
}