1

所以我想做的是

|-------------------------------------------------------------|
|-------|leftdiv-250px|centerdiv-1000px|rightdiv-250px|-------|
|-------------------------------------------------------------|

这是HTML

<div id="header">
    <div id="header-top">
        <div id="header-top-main">
        </div>
    </div>
    <div id="header-main">
        <div id="header-main-inner">
            <div id="header-main-left">
            </div>
            <div id="header-main-center">
            </div>
            <div id="header-main-right">
            </div>
        </div>
    </div>
</div>

这是CSS

#header {
    height: 190px;
    width: 100%;
    background: #e5e5e5;
    margin: auto;
}

#header-top {
    height: 50px;
    width: 100%;
    background: #e9e9e9;
    background-image: url(../img/header-top-bg.png);
    -webkit-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 0px 10px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 0px 10px rgba(50, 50, 50, 0.75);
    margin: auto;
    z-index: 999;
    position: relative;

}

#header-top-main {
    height: 50px;
    width: 1000px;
    margin: auto;
}

#header-main {
    margin: auto;
    width: 100%;
}

#header-main-inner {
    margin: auto;
    width: auto;
}

#header-main-left {
    width: 250px;
    height: 140px;
    background: url(../img/header-main-left-bg.png);
    float: left;
}

#header-main-center {
    width: 1000px;
    height: 140px;
    background: #f7f7f7;
    display: inline;

}

#header-main-right {
    width: 250px;
    height: 140px;
    background: url(../img/header-main-right-bg.png);
    float: right;

}

所以我不确定问题是什么，我试图将它们全部浮动在一个具有自动边距但似乎没有工作的包装器中。出现的另一个问题是它全部显示在 1 行中，但它堆叠在页面的左侧，一直持续到右侧，使页面滚动。

我想要的是，'header-main' 区域以 3 个 div 为中心。如果“header-main”区域离开页面，我希望它在没有滚动的情况下继续离开页面。如果需要我正在尝试做的事情的屏幕截图，那么我可以提供它。

这是另一个例子

--------------------|------[        header-top          ]------|-------------------
space beyond screen |------[leftdiv][centerdiv][rightdiv]------| spce beyond screen
--------------------|------[        navigation          ]------|-------------------
4

2 回答 2

1

这将解决您的 div 定位问题，这是一个FIDDLE

#header-main-left,
#header-main-center,
#header-main-right {
  float: left;
  height: 140px;
}

#header-main-left {
  width: 25%;
  background: url(../img/header-main-left-bg.png);
}

#header-main-center {
  width: 50%;
  background: #f7f7f7;
}

#header-main-right {
  width: 25%;
  background: url(../img/header-main-right-bg.png);
}

第二部分我不太明白

“如果'header-main'区域离开页面，我希望它在没有滚动的情况下继续离开页面。”

于 2013-09-22T16:04:28.847 回答
1

我会向元素添加浮动，向元素添加高度，向父元素添加最小宽度。

#header-main-left,
#header-main-center,
#header-main-right {
    float: left;
    height: 140px;
}
#header-main-inner {
    min-width: 1500px;
}

然后要停止滚动，我会说添加一个overflow: hidden;：

#header-main {
    overflow: hidden;
}

小提琴

于 2013-09-22T16:05:18.290 回答