1

私はこの基本的な HTML 構造を持っています:

<div id="left-column"></div>
<div id="content"></div>
<div id="right-column"></div>

そしてこのCSS：

#left-column
{
    padding-top: 25px;
    width: 80px;
    background: url('../../common/images/black70.png');
    height: 100%;
    float: left;
    margin-right: 5px;
}

#content
{
    padding: 5px;
}

#right-column
{
    padding-top: 25px;
    width: 190px;
    background: url('../../common/images/black40.png');
    height: 100%;
    float: right;
}

問題は、コンテンツのパディングが右の列に伝播されていることです:

ここに画像の説明を入力

どうすればこれを回避できますか?

ありがとう

4

2 に答える 2

2

問題は、ドキュメントフローでは、コンテンツの後に開始されること#right-columnです。コンテンツの上部と下部のパディングからの高さがあります。#content10px

このようにHTMLを並べ替えると、問題が修正されます。

<div id="left-column"></div>
<div id="right-column"></div>
<div id="content"></div>

これがjsfiddleです

于 2012-04-13T15:44:33.107 に答える
0

フローティングのものと非フローティングのものがある場合、フローティングのものは常にソース内の非フローティングのものより前に来る必要があります。

あなたの場合、コンテンツが最初にレンダリングされ、次にその下の右側の列がレンダリングされます。

于 2012-04-13T15:46:34.600 に答える