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左侧的两个边箱(＃secondaryOne，＃secondaryTwo)排成一行，而无需将它们嵌套在单独的div中？如果我使用float:留在它们上面，它们会并排排列；如果我不漂浮它们，则#primary会在它们下面而不是在它们旁边生成。

解决方案

问题＃1由joeytje50使用辅助+主标签解决，并将辅助边箱放置在HTML中的主边框之前。

问题2的解决方法不止一种。我选择的方式是将辅助标签放置在一起，并在主标签之前放置，由NoobEditor使用clear: left和负margin-top进行。

该解决方案可以在以下位置找到: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%;
}

替代解决方案不再需要明确的说明，并且可以扩展为其他用途。现在，边箱div中可能还需要1、2、3或许多框。

谢谢大家的帮助。

最佳答案

要回答有关辅助盒不在时主盒宽度为100％的问题，您可以执行以下操作:

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

如果将CSS代码放在样式表的底部，然后将主div标签放在第一个辅助div标签之后，则默认情况下它将为100％宽，除非存在具有class="secondary"的元素。这不会改变div呈现位置的任何内容，但可以解决您的问题。

另外，如果您的二级div可能被隐藏而不是不存在，则可以执行以下操作:

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

也就是说，假设您通过.hidden之类的类来隐藏辅助选项卡。

Here 是一个工作版本，当删除辅助副本时，其宽度变为100％，但如果前面有.secondary元素，则宽度仍为75％。

关于html - 带有可选边箱的流体布局，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20817586/