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

概述我想要一个有三个盒子(两个可选)的布局,如下所示： [侧箱1] [主要内容 [边框2].主要内容] 要么 [如果没有提供侧箱,主要内容跨度为100％] 我希望主内容框跨越#load(减去边距)中可用的整个高度和宽度,除非边框在那里,然后我希望它只跨越那些框(及其右边距). 我的CSS： #load { margin: 10px; height: 100%; min-widt 我想要一个有三个盒子(两个可选)的布局,如下所示：

[侧箱1] [主要内容

[边框2].主要内容]

要么

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

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

我的CSS：

#load {    @R_301_5553@: 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;    @R_301_5553@-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" ></div>        <div ID="BoxTwo" ></div>        <div ID="BoxThree" ></div>    </div>    <div ID="primary" ></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%;    @R_301_5553@-right: 10px;}#sIDeBoxes .Box {    float: left;    height: 220px;    @R_301_5553@-bottom: 10px;    wIDth: 100%;}

备用解决方案不再需要清除,可以扩展用于其他用途.您现在可以在sIDeBoxes 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 – 带可选侧箱的流体布局全部内容，希望文章能够帮你解决html – 带可选侧箱的流体布局所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。