0

レスポンシブ デザインを学ぼうとしているので、チュートリアルに取り組んでいます。ウィンドウのサイズが縮小されたときの私のバナー画像は、バナー div をエスケープし、右側のサイズが正しく変更されません。バナー div に適用されているスタイリングに絞り込みましたが、私の人生では理解できません。私のコーディングのどの部分がそうすることができますか?

ライブバージョンはここで見ることができます: http://ctxdesigns.net/nelson/

クロムによると、これは #banner に適用されているものです

-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(255, 255, 255);
background-image: none;
background-origin: padding-box;
background-size: auto;
border-bottom-color: rgb(0, 0, 0);
border-bottom-style: none;
border-bottom-width: 0px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(0, 0, 0);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(0, 0, 0);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(0, 0, 0);
border-top-style: none;
border-top-width: 0px;
display: block;
float: left;
font-family: 'Times New Roman';
font-size: 16px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 500px;
line-height: normal;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 9.796875px;
padding-left: 9.796875px;
padding-right: 9.796875px;
padding-top: 9.796875px;
vertical-align: baseline;
width: 980px;
4

2 に答える 2

1

問題である 100% div に 1% のパディングを追加しています (左右に 1% を追加しているため、98% にする必要があります)。

これを行う：

#banner {
background: white;
display: block;
float: left;
padding: 1%;
height: auto;
width: 98%;
}

あなたはそれが正確であることがわかります。

バナーを 100% に維持する必要がある場合は、内側の div を追加してパディングを設定します。

于 2013-09-06T17:33:15.263 に答える