HTML – 是否可以使用混合流体/非流体网格系统？

使用bootstrap 2,在左侧使用静态宽度列并使右列成为流体的最简单方法是什么.这样的东西有200 px宽度左列和右边填充
浏览器窗口.

======================
Hello
======================
 A   |
 B   |      100%
200px|
 D   |
 E   |
 F   |

我尝试将min-width添加到常规容器布局中,但在调整大小时它有一些奇怪的行为：

<div class="container-fluid">

    <div class="row-fluid">
        <div class="span12">Hello</div>
    </div>

    <div class="row-fluid">
        <div class="span2" style="min-width:200px">Left Column</div>
        <div class="span10">Right Column</div>
    </div>

</div>

这里有一个JS小提琴,虽然js小提琴本身的四重布局似乎在添加自己的行为.

http://jsfiddle.net/BVmUL/882/

解决方法

你可以尝试这种方法.使用float：left;在左栏上并给出一个填充左：200px;到了正确的栏目就是这样.你画了你的布局.在底部添加了clearfix,以便将来可以使用页脚.这样您就可以继续支持大多数浏览器.

检查JsFiddle Demo

HTML

<div class="container-fluid">

    <div class="row-fluid">
        <div class="span12 header">Hello</div>
    </div>

    <div class="row-fluid">
        <div class="span2 left-col">Left Left Left Left Left Left Left</div>
        <div class="span10 right-col">Right Right Right Right Right Right Right </div>
    </div>

</div>
   <div class="clearfix"></div>

CSS

.header{
    background-color:#f00;
}
.left-col{
    background-color:#0f0;
    float:left;
    width:200px;
    height:400px;
}
.right-col{
    background-color:#00f;
    height:400px;
    padding-left:200px;
}

之后,您可以使用Javascript动态调整窗口大小调整左侧列宽和右侧列填充.

您可能还想考虑以下备选方案：

1. Calc()(仅限IE9)

如果您不关心IE8支持,这是实现它的最简单方法.你可以学习如何here

2.媒体查询(仅限IE9)

您可以像Bootstrap一样使用媒体查询但不能使用百分比度量来实现您所需的内容.您可以使用它来更改css属性值,并以此方式使其响应(使用您的自定义限制).

3. Flexbox(仅限IE10(部分IE9))

由于浏览器的支持,现在会很棒但不推荐.

4.表格

以this thread为例,了解您不应该使用它的原因.

（编辑：泉州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!