Question

希望我能解释清楚，因为我过去没有。

我希望实现这样的目标...将一个wepage分成三个并将标题放在中心。

| TitleLeft |标题| TitleRight |

因此假设标题为width:500px。左右标题将根据窗口大小而变化。将其设置为500px然后margin: 0 auto;即可。这就是我拥有页面内容的方式，但标题应该向左拉伸，同时仍然在页面中心（或在500px边界内左对齐）。因此，假设标题具有橙色背景。 TitleLeft也应该有橙色背景。

也许这会有所帮助（它使用表并严格对齐......我想尽可能避免使用表格！）因为它大致显示了我的目标。

http://jsfiddle.net/CmWRu/

Answer 1

如果我理解你的问题，你正在寻找：

中间栏是固定的，以屏幕为中心
左右列将始终分别向左和向右展开，以填补剩余的可用空间，即使屏幕重新调整尺寸
标题将始终以各自的div为中心。

好的，首先是一些HTML（我使用表示性标记使这更容易理解......你想要确定哪个标记与你的项目在语义上相关：

<div id="wrapper">
    <div id="left">
        <h2>Title Left</h2>
    </div>
    <div id="center">
        <h2>Title Center</h2>
    </div>
    <div id="right">
        <h2>Title Right</h2>
    </div>
</div><!-- wrapper -->

一点CSS：

#wrapper {
    width: 100%;
    overflow: hidden;
}
#left, #right {
    background: #FF8C00;
}
h2 {
    text-align: center;
}
#center {
    width: 500px;
    float: left;
    background: #e0e0e0;
}

还有一些jQuery：

//document ready function
$(document).ready(function(){

    //on page load, call the resizeColumns function
    resizeColumns(); 

    //and also call it whenever the window resizes
    $(window).resize( resizeColumns );

    //we define the function
    function resizeColumns(){

        //grab the width of the wrapper and save it to a variable
        var windowSize = $('#wrapper').width(), 

        //same thing for the width of the div with id of "center"           
        centerSize = $('#center').width(),

        //windowSize - centerSize = the remaining width of the screen. 
        //Divide that by 2, and that's how wide each remaining column should be. 
        //We save that value to a variable
        fluidSize = (windowSize-centerSize)/2;

        //Now just set the width of the left and right columns equal to fluidSize
        //and float them to the left.
        $('#left, #right').width(fluidSize).css('float','left');

     }

 });

在背景触摸屏幕左侧时居中内容，

1 个答案: