0

好的，所以我正在设计一个页面中心需要 50% 宽度的 div - 没问题。我的屏幕顶部还需要一个 50% 宽的标题 - 没问题。最后，我需要将该标题放在一个固定的 div 中，以便在我滚动时它保持在我的屏幕顶部 - 这就是我遇到问题的地方，无论我多么努力，我似乎​​都无法获得那个顶部 div居中大概是因为它是一个流动的宽度，我不能真正指定一个像素边距？

这是我一直在处理的代码（暂时保持简单）......

<div id="wrapper">
    <div id="topwrapper">
        <div id="top">
            <div id="topleft"></div>
            <div id="topright"></div>
        </div>
    </div>
    <div id="table">
        Lorum Ipsum to fill here.
        <div id="left"></div>
        <div id="right"></div>
    </div>
</div>

还有我的 CSS .....

#wrapper {
    overflow:         auto;
    position:         absolute;
    top:              0px;
    left:             0px;
    height:           100%;
    width:            100%;
    background-image: url('images/background.jpg');
}

#table {
    position:         relative;
    margin:           0 auto;
    width:            50%;
    background-image: url('images/midmiddle.png');
    padding:          50px;
    padding-top:      130px;
}

#topwrapper {
    position:    fixed;
    margin-left: -112px;
    left:        50%;
    width:       50%;
    z-index:     20;
    height:      169px;
}

#top {
    position:         relative;
    margin-left:      -8px;
    left:             -50%;
    width:            100%;
    background-image: url('images/topmiddle.png');
    z-index:          20;
    height:           169px;
    padding-left:     112px;
    padding-right:    112px;
}

#left {
    position:         absolute;
    margin-left:      -162px;
    top:              0px;
    width:            112px;
    height:           100%;
    background-image: url('images/midleft.png');
    z-index:          10;
}

#right {
    position:         absolute;
    right:            -112px;
    top:              0px;
    width:            112px;
    height:           100%;
    background-image: url('images/midright.png');
    z-index:          10;
}

#topleft {
    position:         absolute;
    margin-left:      -168px;
    top:              0px;
    width:            112px;
    height:           169px;
    background-image: url('images/topleft.png');
    z-index:          10;
}

#topright {
    position:         absolute;
    right:            -56px;
    top:              0px;
    width:            112px;
    height:           169px;
    background-image: url('images/topright.png');
    z-index:          10;
}

因此，我的主包装器的宽度和高度为 100% 以占据大部分空间，左上、右上、左和右 div 位于主 div 内，以重复我的盒子的两侧，但顶部是我卡住的地方.

我发布的代码实际上有效，但正如您所看到的，这是一个非常复杂的解决方法，大多数边距与我的侧面图像尺寸有关，但#top -8px 是我似乎可以绕过它工作的唯一方法 - 那里一定是更简单的方法？！

非常感谢您的帮助:)

感谢您的输入 - 对代码格式感到抱歉，我在 CSS 之前放了四个空格，但我猜你们喜欢它在列表中而不是行中 - 抱歉，旧习惯....！

我已经设法让它在一定程度上再次工作，在顶部包装器上放置 25% 左右，顶部 100% 宽度和 -120px 边距......现在看看（鉴于我的图片是 112px 宽）我已经在某处拾取了额外的 8px，这也可以在原始代码中看到（-8px 的左边距）。对方程式中的计算方式感到非常困惑......但它正在工作！

我会看看那个小提琴，不是我熟悉的东西，所以期待学习新东西:)

非常感谢大家的帮助:)

4

3 回答 3

0

尝试将#wrapper 的边距设置为自动怎么样？也许问题是包装器没有固定到位，所以#wrapper 可能正在移动，而不是桌子？

于 2012-05-03T18:04:19.533 回答
0

我通过创建一个固定的包装器，然后将可见元素定位为子元素来做到这一点。见http://jsfiddle.net/LDVmu/

所以，HTML是

<div id="top"><div>I am at the top!</div></div>

<div>blah blah blah</div>

我使用的 CSS 是

#top {position: fixed; width: 100%;}

#top div {width: 50%; margin: auto; border: 1px solid red; background: white;}

我知道这是另一个嵌套的 div，它的语义较少，但我认为这是唯一可行的方法。绝对和固定定位以及 left/right=0 的居中技巧似乎仅适用于显式像素宽度。

于 2012-05-03T18:42:12.503 回答
0

从您的问题中我不确定它是否完全无法居中对齐（即它出现在页面的左侧）或者它是否稍微偏离中心，或者我怀疑它几乎完全在右侧。

#topwrapper宽度为 50%，左侧为 50%。所以它从页面的一半开始并占据页面的一半（右半部分）。只有负边距才能将其推回正确的方向。left减少到 25% ，而不是负边距。那么你应该不再需要负定位/边距了#top。

在此之后，它可能仍然稍微偏离中心。如果是这样，那可能是因为滚动条出现在#wrapper. #table调整以允许他们，#topwrapper不（因为它是固定位置，所以它只注意什么html和/或body正在做什么）。解决方案 - 至少对于 Chrome 和 Firefox，我没有在其他人身上测试过 - 是让滚动条永远存在html并且永远不会在bodyor #wrapper：

更改height为min-heightin #wrapper，并添加以下内容：

html {
    margin:            0;
    height:            100%;
    overflow-y:        scroll;
}
body {
    margin:            0;
    min-height:        100%;
}

一些笔记...

  1. 如果您想#wrapper拥有 100% 的视口高度，那么 body（在大多数浏览器中html）也需要拥有它。
  2. 您#table的 padding-top 为 130px，但#topwrapper高度为 169px，因此您的 Lorem Ipsum 隐藏在下方。我将 padding-top 增加到 180px。
于 2015-11-12T11:04:15.827 回答