0

但我读过很多其他的）

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

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

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

在此先感谢-我觉得问这个有点愚蠢，但是几年来我不必考虑网络，现在我感觉落后了。

<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>
4

1 回答 1

0

这让我想起了过去……十多年前，当我们看到很多车架时。您可以只给出一个框架宽度 =“*”，它会占用页面上剩余的宽度。我真的希望今天的 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 是否有边距。

然后按照您认为合适的方式设置您的高度、背景、边框等。

让我知道你是否有运气。

于 2013-09-04T04:35:24.537 回答