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 行で表示されることでしたが、ページの左側に積み重なって右にずっと続き、ページがスクロールします。

私が望むのは、「ヘッダーメイン」領域が 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 に答える