1

一部のコンテンツを境界線に合わせるのに問題があります。さらにテキストを入力すると、添付のスクリーンショットに示すように、垂直方向に収まるように拡張するのではなく、境界線を越えて続きます。

そして、私のCSSファイルは次のとおりです。

body {
    background-image:url(http://www.cs.aub.edu.lb/hsafa/cmps278/hw2/background.png);
    background-repeat:repeat;

    background-attachment:fixed;
    margin: 0px;
    padding: 0px;
    font-family: Verdana, Tahoma, sans-serif;
    }
h1 {
    text-align: center;
    font-family: Tahoma, Verdana, sans-serif;
    font-size: 24pt;
    text-shadow: 3px 3px #999999;
    font-weight: bold;
}
p {
    font-size: 8pt;
}
#content {
    width: 800px;
    margin: auto;
    border: 4px solid gray;
    border-radius: 20px;
    background-color: #A2B964;
}
#banner {
    height: 50px;
    background-image:url(http://www.cs.aub.edu.lb/hsafa/cmps278/hw2/bannerbg.png);
    background-repeat:repeat;
}
#banner img {
    display: block;
    margin:auto;
    overflow: hidden;
}
#general {
    float: right;
    width: 250px;
    border-radius: 0px 20px 0px 0px;
}
dl {
    margin: 10pt;
    font-size: 8pt;
    font-family: Ariel, sans-serif;
}
dt {
    font-weight: bold;
    margin-top: 10pt;
}
ul {
    list-style-type: none;
}
li {
    margin-left:0px;
}
#leftsection {
    width: 550px;
    overflow:hidden;
    background-image:url(http://www.cs.aub.edu.lb/hsafa/cmps278/hw2/background.png);
    background-repeat:repeat;
    background-attachment:fixed;
}
#rating {
    height: 83px;
    background-image:url(http://www.cs.aub.edu.lb/hsafa/cmps278/hw2/rbg.png);
    background-repeat: repeat;
    overflow: hidden;
    border-radius: 20px 0px 0px 0px;
}
#rating img {
    border-radius: 20px;
}
.special {
    vertical-align: top;
    font-size: 48pt;
    font-weight: bold;
    color: red;
}
.review {
    font-size: 8pt;
    font-family: Verdana, Tahoma, sans-serif;
    font-weight: bold;
    background-color: #E8DC9B;
    border: 2px solid gray;
    border-radius: 10px;
    padding-left: 8px;
    padding-right: 8px;
}
.personal {
    margin-bottom: 20pt;
}
.italic {
    font-style: italic;
    margin-left: 40px;
}
img.review {
    padding-right: 5px;
}
#leftcol {
    margin-top: 2%;
    margin-left: 2%;
    margin-right: 2%;
    float: left;
    width: 47%;
}
#rightcol {
    margin-top: 2%;
    margin-right: 2%;
    float: right;
    width: 47%;
}
#pages {
    text-align:center;
    margin: 5px;
}
#validated {
    position: fixed;
    top: 90%;
    left:80%;
    width: 600px;
}
#validated img {
    opacity: 0.5;
}

CSSDeck に HTML コードを追加しました: http://cssdeck.com/labs/full/bldwwaec

4

3 に答える 3

1

HTMLコードも入れたほうがいいでしょう。

右側の要素はfixed（またはabsolute）またはfloat。です。floatの場合は<br />、親要素の最後にaを追加して設定するだけで、簡単に修正できますclear: both;。このような：

<div id="parent">
    <div>aaa</div>
    <div class="float-right">bbbb</div>
    <br style="clear: both;" />
</div>

これでdiv#parent、コンテンツに適合し、境界線を設定すると、問題が修正されます。

absoluteただし、説明したほど簡単ではない場合は、その部分の（または）の使用法を変更することをお勧めしabsoluteますfixed。

頑張って、
モハマド・アリ・シャープサンド

于 2013-03-01T08:47:21.383 に答える
0

id = contentの上にもう1つdivを置く必要があり、calss=pagewrapperを呼び出すことができます。

.pagewrapper {margin：0 auto; 幅：800px;}

あなたのIDにfloat：leftを入れてください

content {float：left;}

于 2013-03-01T10:11:07.453 に答える
0

問題は、フローティング右列にあるようです。

#rightcol {float: right;}

フローティング要素は通常のページフローから削除されるため、フロートをクリアする必要があるように見えます。親要素は高さに合わせて拡張されません。簡単な解決策は、親要素またはクラス（この場合はID）にclearfixを追加することです。

#content:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

これで問題が解決するはずです。これについてさらに質問がある場合は、こちらをご覧になることをお勧めします。

于 2013-03-01T09:01:10.947 に答える