css - 将内容居中，同时让背景触摸屏幕左侧，

Question

希望我能很好地解释这一点，因为我过去没有。

我希望实现这样的目标...将网页分成三部分并在中间放置一个标题。

|TitleLeft|Title|TitleRight|

所以假设标题是width:500px。左右标题将根据窗口大小而变化。将其设置为 500px 和 margin: 0 auto; 就够简单了。这就是我获得页面内容的方式，但标题应向左拉伸(stretch)，同时仍位于页面中心(或在 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');

     }

 });