0

DreamWeaverでは、すべてが正常にコンパイルされ、[デザイン]タブでは正常に見えますが、ローカルホストに切り替えると、コンテンツのDIVは、中央にあるはずの左側にのみテキストを表示します。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="/css/style.css" type="text/css">       
    <title>Title</title>
  </head>
  <body>

    <img src="images/barColor.jpg" width="1" height="71" alt="barColor" />

    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>   

    <div class="wrdLatest" id=1> content of id 1   <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>              </div>                                                                     
<div class="wrdLatest" id=2> content of id 2   <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p> </div>
<div class="wrdLatest" id=3> content of id 3   <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>              </div>
<div class="wrdLatest" id=4> content of id 4   <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p> </div>
<div class="wrdLatest" id=5> content of id 5   <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p> </div>
<div class="wrdLatest" id=6> content of id 6   <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p> </div>
<div class="wrdLatest" id=7> content of id 7   <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p> </div>
<div class="wrdLatest" id=8> content of id 8   <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p> </div>
<div class="wrdLatest" id=9> content of id 9   <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p> </div>
<div class="wrdLatest" id=10> content of id 10 <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p> </div>
<div class="wrdLatest" id=11> content of id 11 <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p> </div>
<div class="wrdLatest" id=12> content of id 12 <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p> </div>

  </body>
</html>

そして、style.css

  #wrdLatest {
        background: url('../images/spacing.png') repeat-y;
        z-index: -1;
        padding: 20px;
        margin-left: auto;
        margin-top: auto;
        width: 75%;
        height: 100%;
        min-height: 25px;
        min-width: 25px;
        background-repeat: repeat-y;
        style="text-align: center;"
    }

1欲しいもの 1得ているもの

どんな助けでも大歓迎です...そしてはい、私はHTMLに不慣れです。

4

2 に答える 2

1

コードにエラーがあり、終了タグ</div>ですべてのdivを閉じていません。また、cssstyle="text-align: center;"が正しくない場合は、次のようにすべてのdivを閉じてください。

<div>Content</div>

style="text-align: center;"から行を削除する#wrdLatestか、

text-align: center;

wrdLatestはHTMLのクラスですが#、cssでIDを使用しています。クラスは次のようになります

.wrdLatest{
    background: url('../images/spacing.png') repeat-y;
    z-index: -1;
    padding: 20px;
    margin-left: auto;
    margin-top: auto;
    width: 75%;
    height: 100%;
    min-height: 25px;
    min-width: 25px;
    background-repeat: repeat-y;
}
于 2012-04-18T01:13:20.830 に答える
0

CSSを変更して、希望どおりのレイアウトを実現しました。このjsFiddleを見てください。

左のオレンジ色の境界線を表示するためにborder-leftを使用しました。また、.wrdLatestの代わりに#wrdLatest使用する必要がありますdiv class

CSSの変更されたバージョン...

.wrdLatest {
    background: url('../images/spacing.png') repeat-y;
    z-index: -1;
    padding: 5px 20px 70px 20px;
    margin-left: auto;
    margin-top: auto;
    width: 75%;
    height: 100%;
    min-height: 25px;
    min-width: 25px;
    background-repeat: repeat-y;
    text-align: left;
    border-left: 2px solid #FE642E;
}

そして、余分な空のをすべて削除しました<p>。

お役に立てれば。

于 2012-04-18T01:44:12.640 に答える