1

http://trackstudent.pt/index.phpで Web ページを設計しています。

修正できないバグに遭遇しました。リンクを調べた後<p></p>に が右に押し出されていることに気付いた場合、原因がわかりません。すべての div には margin:0、padding:0 があり、その要素がそのスペースに収まるように十分なスペースがあります。

驚くべきことに、コンテンツの 2 行目では、そのようなことは起こりません。

1kbgrid (12 列の 960px グリッド) の CSS があります。

// Grid Cell (column)
.column {
    margin: 5px 10px;
    overflow: hidden;
    float: left;
    display: inline;
}

// Grid row
.row {
    width:960px;
    margin: 0px auto;
    overflow: hidden;
}

// Nested rows
.row .row {
    margin: 0px -10px;
    width: auto;
    display: inline-block;
}

HTMLには次のものがあります：

<body> -> width: 100%
<div id="container"> -> width: 100%
<div id="mainWrapper"> -> width: 960px
<section class="row"> -> width: 960px

編集: クリア: 両方; #wrapperMain で動作します! しかし、ヘッダーには高さ: 40px とロゴもあるため、ヘッダーを通過するロゴの拡張領域が存在してはならないため、なぜこれが起こっているのかまだわかりません。誰でも洞察を提供できますか？

前もって感謝します。

4

1 に答える 1

3

フローティングロゴからです。次の CSS を追加するだけです。

#wrapperHeader {
 overflow:hidden; /* Forces header to contain elements */
}

または：

#wrapperMain {
 clear:both; /* Pushes wrapper down until it's past bottom of header elements */
}
于 2012-07-23T20:32:03.747 に答える