Question

所以我要做的就是

|-------------------------------------------------------------|
|-------|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          ]------|-------------------

Answer 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'区域离开页面，我希望它在没有滚动的情况下继续离开页面。”

Answer 2

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

#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;
}

Fiddle

CSS3水平div对齐

2 个答案: