Question

但我读了很多其他的）

我正在尝试为我的投资组合网站创建流体固定流体布局。我在网上尝试了一些不同的选项，但我看到的每个人都提供固定流体固定或布局，其中有两个流体柱放在一边。

我希望有一个直接的1024px中间（内容）部分，旁边有两个支持流体列。

我没有太多代码可供提供，但我会为go go创建一些示例。

提前致谢 - 我觉得有点愚蠢地问这个问题，但是几年后我没有考虑网络，现在我感觉落后了。

<div class="row-fluid">
    <div class="span3"></div>
</div>

<div id="row-fixed">
    <div class="span6"></div>
</div>

<div id="row-fluid">
    <div class="span3"></div>
</div>

Answer 1

这让我想起了当天......十多年前，当我们看到很多框架集时。你可以给一个框架宽度=“*”，然而它占用的页面上还有很多宽度。我真的希望今天的CSS提供相同的......但是，它没有。

您可以使用js，css和html轻松模拟效果。

HTML：

<div class="container">
     <div class="sidebar pull-left">

     </div>
     <div class="sidebar pull-right">

     </div>
     <div class="main-content">

     </div>
</div>

JS :(在Mac OSX中测试 - Chrome版本29.0.1547.65）http://jsfiddle.net/mmME5/

function setSidebarWidth(){
    var container_width = $('.container').width();
    var main_content_width = $('.main-content').width();

    //init sidebars
    $('.sidebar').width((container_width - main_content_width)/2);

    return;
}

$(function(){
    //init at document ready
    setSidebarWidth();

    //resize listener
    $(window).resize(function(){
        setSidebarWidth();
    });
});

注意：您可能需要在js函数中使用.outerWidth（true），具体取决于您的div是否有余量。

然后按照你认为合适的方式设计高度，背景，边框等等。

如果你有运气，请告诉我。

使用Bootstrap的流体固定流体布局

1 个答案: