双柱(流体静态)在三列(静态 - 流体 - 静态)布局中

时间:2012-04-02 14:08:37

标签: html css layout static fluid

我想要的是什么:

----------------------------------------------------------------
|        |                                            |        |
|        |        other divs like div_3 & div_4       |        |
|        |                                            |        |
|        |--------------------------------------------|        |
|        |           |                                |        |
| div_1  |   div_3   |        div_4                   | div_2  |
|(static)| (Static)  |       (Fluid)                  |(static)|
|        |           |                                |        |
|        |           |                                |        |
|        |--------------------------------------------|        |
|        |                                            |        |
|        |       other divs like div_3 & div_4        |        |
|        |                                            |        |
----------------------------------------------------------------

我得到了什么:

----------------------------------------------------------------
|        |                                            |        |
|        |        other divs like div_3 & div_4       |        |
|        |                                            |        |
|        |--------------------------------------------|        |
|        |           |                                |        |
|        |           |           div_4                |        |
|        |           |          (Fluid)               |        |
|        |           |                                |        |
|        |--------------------------------------------|        |
|        |           |                                |        |
| div_1  |   div_3   |                                | div_2  |
|(static)| (Static)  |                                |(static)|
|        |           |                                |        |
|        |           |                                |        |
|        |--------------------------------------------|        |
|        |                                            |        |
|        |       other divs like div_3 & div_4        |        |
|        |                                            |        |
----------------------------------------------------------------

注意:div_3和div_4属于单独的分组包装器,因为其下方和上方的其他内容

我的问题是div_3最终在div_4之下交错,因为(至少我相信)div_4的margin-left。

另外,因为div_3和div_4在包装器中,所以我不能使用我用于div_1的负边距左侧技巧。

#div_1{
    float: left;
    width: 50px; 
    margin-left: -100%;
}
#div_2{
    float: left;
    width: 50px;
    margin-left: -20px;
}
#div_3_and_div_4_wrapper {
    margin: 0 50px 0 50px;
}
#div_3 {
    clear:left;
    float:left;
    width: 250px; 
}
#div_4{
     margin-left: 250px;
}

0 个答案:

没有答案