1

私の問題:

CSS は、特定の div に 30 の余分なピクセルを含める必要があります。その理由を知りたいです。また、 ではなく、他の 2 つの div と一緒に偶数にしたいと思いx+30ます。

私の解決策:

他の div と同じにするために、3 番目の div に 30 ピクセルを追加するだけです。

ここにjsFiddleがあります。

私が話している3つのCSSは次のとおりです。

.sidebar-top {
    float: left;
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
    border: 1px solid #ccc;
    height: 32px;
    width: 290px;
    background: -webkit-linear-gradient(top, white 0%,#E8E8E8 100%);
    background: linear-gradient(to bottom, white 0%,#E8E8E8 100%);
    padding: 4px 15px;
}
.sidebar-middle {
    float: left;
    width: 290px;
    padding: 5px 15px 0 15px;
    border-right: 1px solid #d3d3d3;
    border-left: 1px solid #d3d3d3;
    background: #fff;
}
.sidebar-bottom {
    background: #fff;
    float: left;
    height: 16px;
    width: 320px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    border-right: 1px solid #d3d3d3;
    border-left: 1px solid #d3d3d3;
    border-bottom: 1px solid #d3d3d3;
    margin-bottom: 15px;
}

私の質問/tl;dr:

他の div と同じにするために 30 ピクセルを追加する必要があるのはなぜ.sidebar-bottomですか?

4

3 に答える 3

3

つまり、それぞれsidebar-topにパディングが追加されているためですsidebar-middle

他の s の15px両側に のパディングがあるためです。divこれが、追加する必要がある理由です30px

これをに追加するだけsidebar-bottomです:

padding: 0px 15px;
于 2013-03-10T18:57:36.267 に答える
0

2 つの上部 DIV について、幅 290px を定義し、各辺に 15px のパディングを配置すると、ボックス モデルは 290px を要素の内側の幅と見なします。そのため、左右に 15px が追加され、要素は 290 ではなく 320px になります。 3 番目の DIV は 290px で、パディングを入れなかったので、30px を 290px に追加する必要がありました。

これは Box モデルの問題の 1 つであり、必要な寸法を得るためにパディングやボーダーを調整する必要がありました。

解決策は、3 番目の DIV にパディングを追加することです。

.sidebar-bottom {
    background: #fff;
    float: left;
    height: 16px;
    width: 290px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    border-right: 1px solid #d3d3d3;
    border-left: 1px solid #d3d3d3;
    border-bottom: 1px solid #d3d3d3;
    margin-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

http://jsfiddle.net/mkhoudary/E2JCm/1/

于 2013-03-10T19:00:46.300 に答える