0

嘿，抱歉标题太长了，但我需要解决这个问题，并且已经使用了一段时间。

基本上有一个标题，我想在它下面移动内容。一切都是相对的（保持居中），所以标题有一个边距顶部、z-index、ecc。

该页面是相对的，具有负边距，并且包含嵌套的浮动列，这些列不会超过标题（该死）并且无法弄清楚原因。

如果可能，我想避免使用绝对定位。这是代码：

<div class="header wrapper-standard">
    <div class="logo">
        <div class="inside">hello</div>
    </div>
    <div class="menu-wrapper-outer">asda</div>
    <div class="clear"></div>
</div>
<div class="about-page wrapper-standard notop">
    <div class="about-page content">
        <div class="about-block wrapper-long">
            <div class="col col-left text-first">
                asda
            </div>
            <div class="col col-right">
                lol
            </div>
            <div class="clear"></div>
        </div>
        <div class="about-block wrapper-long">
            <div class="col col-left text-first">
                asda
            </div>
            <div class="col col-right">
                lol
            </div>
            <div class="clear"></div>
        </div>
        <div class="about-block wrapper-long">
            <div class="col col-left text-first">
                asda
            </div>
            <div class="col col-right">
                lol
            </div>
            <div class="clear"></div>
        </div>                   
    </div>
</div>

这是小提琴： 小提琴

谢谢。

4

1 回答 1

0

这是一个非常基本的示例，说明如何拥有一个固定宽度、居中的页面和一个固定的标题，它允许内容在下面流动：

CSS：

<style type="text/css">
    .wrapper{
        height:600px;
        margin:0 auto;
        width:400px;
        background-color:#0ff;

    }
    .header_wrapper {
        position:fixed;
        background-color:#ffd800;
    }        

    .header {
        width:400px;
        background-color:#f00;
        height:100px;
    }
    .page {
        padding-top:100px; /*height of header*/
    }    
</style>

HTML：

<body>
    <div class="wrapper">
        <div class="header_wrapper">
            <div class="header">Header</div>
        </div>
        <div class="page">
            Content will be here bla bla etc
        </div>
    </div>
</body>

这是一个小提琴，你可以看到它工作：http: //jsfiddle.net/JjBG5/1/

于 2013-11-14T13:32:54.870 回答