具有可选侧箱的流体布局
我想要一个包含三个框（两个可选）的布局，如下所示：
[方框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：留在它们上面，它们并排排列，如果我不漂浮它们，#primary会在它们下面生成，而不是在它们旁边生成。
解决方案
clear: left和negative 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类隐藏辅助选项卡。
这里有一个工作版本，当.secondary被移除时变成100％的宽度，但当前有一个.secondary元素时仍然是75％的宽度。
保持你的HTML标记，这里是你的问题的解决方案： 演示
CSS
html.body {
height:100%;
}
#load {
margin: 10px;
height: 100%;
width:100%;
}
#primary, #secondaryOne, #secondaryTwo {
border-radius: 8px;
background: #f5f5f5;
border: 1px solid #ccc;
}
#primary {
float: right;
display:block;
height: 100%;
max-width:100%;;
width: 68%;
margin-top:-70%; /* this is the key */
}
#secondaryOne, #secondaryTwo {
width:30%;
height: 220px;
margin-right: 10px;
}
#secondaryTwo {
margin-top: 10px;
}
问题＃1
为了让你的#primary div适应它的宽度，你可以使用jquery来验证.secondary divs的存在和设置其他宽度为#primary div。
。 .secondary演示
没有.secondary演示
JQUERY：
if ($('.secondary').length){
$('#primary').css('width', '75%');
}
问题＃2
你可以使用clear:left; 并通过改变你的html标记中的divs的顺序，你将有你的2个div放在左边，你的content div放在右边。
小提琴
HTML：
<div id='load'>
<div id='primary'></div>
<div id='secondaryOne' class="secondary"></div>
<div id='secondaryTwo' class="secondary"></div>
</div>
CSS：
.secondary{
clear:left;
float:left;
}