html - 带有可选边箱的流体布局

Question

我想要一个包含三个框(两个可选)的布局，如下所示:

[边栏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

问题

1. *已解决*如果缺少边框，让#primary 跨越整个宽度。

2. *已解决*有没有办法在#primary 的左侧排列两个侧边框(#secondaryOne、#secondaryTwo)而不将它们嵌套在单独的 div 中？如果我在它们上面使用 float: left，它们并排排列，如果我不 float 它们，#primary 会在它们下面生成，而不是在它们旁边。

解决方案

1. 问题 #1 已由 joeytje50 使用次要 + 主要标签解决，并在 HTML 中将次要边框放在主要边框之前。
2. 问题 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%;
}

备用解决方案不再需要 clear 并且可以扩展用于其他用途。您现在还可以在边栏 div 中有 1、2、3 或任意数量的框。

感谢大家的帮助。

Answer 1

要回答有关当辅助框不存在时主框宽度为 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%。