1

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

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

|TitleLeft|Title|TitleRight|

所以假设标题是width:500px. 左右标题将根据窗口大小而变化。500px将其设置为then就足够简单了margin: 0 auto;。这就是我拥有页面内容的方式，但是标题应该向左伸展，同时仍然位于页面的中心（或在该500px边界内左对齐）。所以假设标题有橙色背景。TitleLeft 也应该有一个橙色的背景。

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

http://jsfiddle.net/CmWRu/

4

1 回答 1

0

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

  • 中间列是固定的，以屏幕为中心
  • 左列和右列将始终分别向左和向右扩展，以填充剩余的可用空间，即使屏幕重新调整大小
  • 标题将始终以各自的 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');

     }

 });
于 2013-01-27T23:57:04.540 回答