0

在 DreamWeaver 中，一切都编译得很好，在设计选项卡上看起来很正常，但是当我切换到 localhost 时，我满足的 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。

已使用左边框来显示左橙色边框。而且您还必须使用.wrdLatest而不是#wrdLatestfordiv 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 回答