3

ブラウザ ウィンドウのサイズ変更に関して、Stackoverflow と同様のレイアウトにしたい Web サイトがあります。

だから私は次のCSSを持っています:

#site-container {
    margin: 0px auto;
    text-align: left;
    width: 100%;
    zoom: 1;
    position: relative;
}

body {
    font-family: arial, helvetica, sans-serif;
    font-size: 81.25%;
    background-color: #fbf9ef;
}

#div-menu {
    display: inline;
}

#header {
    width: 990px;
    height: 80px;
    margin-left : 127px;
    margin-right : 127px;
    margin-bottom: 12px;
    margin-top: 20px;
    border-bottom: 1px solid #c0c0c0;
}

#content {
    width: 990px;
    margin-left : 127px;
    margin-right : 127px;
}

ただし、ブラウザー ウィンドウのサイズを変更すると、Stackoverflow のように動作しません。どういうわけか、Stackoverflow がフローティングのように見え、ブラウザー ウィンドウのサイズに応じてマージンが自動的に縮小されます。

ありがとう

4

2 に答える 2

3

Step 1

Set your #site-container element's width to a fixed value (e.g. 990px), rather than to 100%. Currently, it automatically fills the window, leaving no room for any margin. StackOverflow uses a fixed value of 980px. I believe your site uses 990px.

Alternatively, you can set your container to have table-like layout with display:table;. This way it will stretch dynamically according to the width of its content. In this case, there's no need for any width declaration.

Step 2

Remove the fixed margins from your #header and #content elements. They are redundant and distort the position of the whole layout. The parent #site-container will have enough margin for them both.

于 2013-09-14T14:21:57.743 に答える
1

margin-left: auto; margin-right: 0固定マージン値ではなく、ブロック要素を中央に配置するために使用する必要があります。

于 2013-09-14T14:03:28.143 に答える