html – 带可选侧箱的流体布局

我想要一个有三个盒子(两个可选)的布局,如下所示：

[侧箱1] [主要内容

[边框2].主要内容]

要么

[如果没有提供侧箱,主要内容跨度为100％]

我希望主内容框跨越#load(减去边距)中可用的整个高度和宽度,除非边框在那里,然后我希望它只跨越那些框(及其右边距).

我的CSS：

#load {
    margin: 10px;
    height: 100%;
    min-width: 1080px;
}
#priMary,#secondaryOne,#secondaryTwo {
    border-radius: 8px;
    BACkground: #f5f5f5;
    border: 1px solid #ccc;
}
#priMary {
    float: right;
    height: inherit;
    width: 75%;
    height:500px;
    BACkground:red;
}
#secondaryOne,#secondaryTwo {
    min-width: 250px;
    max-width: 300px;
    height: 220px;
    margin-right: 10px;
    width: 20%;
    clear:left;
    float:left;
}
#secondaryTwo {
    margin-top: 10px;
}

简单的HTML

<div id='load'>
    <div id='priMary'></div>
    <div id='secondaryOne'></div>
    <div id='secondaryTwo'></div>
</div>

JSFiddle

问题

> *已解决*如果缺少侧箱,则#priMary会覆盖整个宽度.
> *已解决*有没有办法在#priMary的左侧排列两个sidebox(#secondaryOne,#secondaryTwo)而不将它们嵌套在一个单独的div中？如果我使用float：left on left,它们并排排列,如果我不浮动它们,#priMary会在它们下方产生,而不是在它们旁边.

解决方案

>问题#1由joeytje50使用辅助主标记解决,并将辅助侧框放在HTML中的主要标记之前.
>问题#2以多种方式解决.我选择的方式是将二级标签放在一起,在主要之前由NoobEditor使用clear：left和一个负边缘顶部.

解决方案可以在：http://jsfiddle.net/v4cvv/67/找到

解决方案的主要部分是：

#priMary {
    width: 100%;
}
#secondaryOne + #priMary,#secondaryTwo + #priMary {
    margin-top: -221px;
    width: 75%;
}

替代解决方案

我在上述解决方案中遇到的一个问题是它需要两个盒子并且它们的高度相同.解决这个问题的方法是将框放在他们自己的div中.这个解决方案是：

HTML

<div id='load'>
    <div id="sideboxes">
        <div id="boxOne" class="box"></div>
        <div id="boxTwo" class="box"></div>
        <div id="boxThree" class="box"></div>
    </div>
    <div id="priMary" class="box"></div>
</div>

CSS

.box {
    border-radius: 8px;
    BACkground: #f5f5f5;
    border: 1px solid #fff;
}
#priMary {
    float: right;
    display:block;
    height: 97%;
    width: 100%;
}
#sideboxes + #priMary {
    width: 75%;
}
#sideboxes {
    float: left;
    height: 97%;
    width: 23%;
    margin-right: 10px;
}
#sideboxes .box {
    float: left;
    height: 220px;
    margin-bottom: 10px;
    width: 100%;
}

备用解决方案不再需要清除,可以扩展用于其他用途.您现在可以在sideboxes div中拥有所需的1,2,3或多个方框.

谢谢大家的帮助.

#priMary {width:100%;}
.secondary + #priMary {width:75%;}

#priMary,.secondary.hidden + #priMary {width:100%;}
.secondary + #priMary {width:75%;}