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

Question

希望我能很好地解释这一点，就像我过去没有的那样。

我希望实现这样的事情...将一个网页一分为三，并在中间放置一个标题。

|标题左|标题|标题右|

所以假设标题是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');
     }
 });