2

ページを 2 つの垂直 div に分割しました。それぞれに、設定された比率を維持しながらサイズを変更できるように、多数のネストされた div がラップされています。これはうまく機能しますが、何らかの理由で左側の div が右側の divよりも短くなってしまいます。CSS は一貫していますが、何かが違います...

ここで、左側の列の下部にギャップが表示されます。

http://jsfiddle.net/VsJLs/

何が悪いのかは明らかですか？ご覧いただきありがとうございます。

<head>
<style type="text/css">
.break {
padding-top: 25px;
}
.leftcol {
width: 50%;
position: absolute;
top: 0px;
left: 25px;
}
.leftpad {
padding-right: 38px;
}
.rightcol {
width: 50%;
position: absolute;
top: 0px;
right: 25px;
}
.rightpad {
padding-left: 37px;
}
.wrapper {
width: 100%;
display: inline-block;
position: relative;
}
.wrapper:after {
padding-top: 161.3%;
display: block;
background-color: red;
content: '';
}
</style>
</head>

<body>

<div class="leftcol">
<div class="leftpad">
<div class="break"></div>
<div class="wrapper"></div>
<div class="break"></div>
<div class="wrapper"></div>
<div class="break"></div>
<div class="wrapper"></div>
</div>
</div>

<div class="rightcol">
<div class="rightpad">
<div class="break"></div>
<div class="wrapper"></div>
<div class="break"></div>
<div class="wrapper"></div>
<div class="break"></div>
<div class="wrapper"></div>
</div>
</div>

</body>
</html>

以下に示すように、マージンをゼロにしようとしましたが、改善されません。問題はpadding-top: 161.3%;物件にあるようです。%忍び寄るミスアライメントを修正するために変更しpxますが、パーセンテージとして維持する必要があります! 誰でもこれを理解できますか？御時間ありがとうございます。

4

2 に答える 2

1

この問題は、マージンの境界が原因で発生します。すべての面で0または同じに設定します。

MARGIN
{BORDER=0;
}
于 2013-02-25T17:10:29.513 に答える
1

私はそれを理解しました-つまり:問題はわかっていますが、理由はまだわかりません...作成したガターは不均等に分割されました:

.leftpad {
padding-right: 38px;
}

と

.rightpad {
padding-right: 37px;
}

両方が等しい場合 ( http://jsfiddle.net/VsJLs/1/ )、スリップはありません。今、私はこの方法で列を作成することを心配しています-それは別の質問ですが...

于 2013-02-25T21:44:19.263 に答える