Question

我刚刚在这里发布了一个与div对齐的问题。我原来的问题得到了回答，但现在我又遇到了另一个问题。链接到我想要做的事情：Click here for the images（点击链接没有任何危害）顺便说一下，这不是作业。链接上的顶部图像（我在Fireworks中创建的东西）是我第一次尝试做的布局（我解决了这个问题），但现在我想添加一个sitename div，正如你在第二张图片中看到的那样用正确的div创造问题。

我昨天和今天的比赛真的很糟糕，犯了这些简单的愚蠢错误。我只需要另一双眼睛来看看我的问题是什么。感谢。

CSS：

#header {
width:750px;
height:341px;
margin-left:25px;
display:block;
}
#tableleft {
float: left;
width: 128px;
margin-left:10px;
margin-right: 5px;
margin-top:10px;
}
#Sitename {
text-align: center;
white-space: normal;
display: table;
float: left;
width: 400px;
height:40px;
margin-top:10px;
margin-left:25px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;

}
#tablecenter {
margin-left:20px;
float: left;
width: 410px;
margin-bottom:5px;
margin-top:30px;
}
#tableright {
float: right;
width: 128px;
margin-left: 20x;
margin-right:10px;
margin-top:10px;
margin-bottom:5px;
}

HTML：

<div id="header">
  <div id="tableleft">
    <div align="center">
      <p><img src="images/SmWhitepic.jpg" width="118" height="87" /></p>
      <p>&nbsp;</p>
      <p><img src="images/SmWhitepic.jpg" width="118" height="87" /></p>
      <p>&nbsp;</p>
      <p><img src="images/SmWhitepic.jpg" width="118" height="87" /></p>
    </div>
  </div>
  <div id="Sitename">Content for  id "Sitename" Goes Here</div>

  <div id="tablecenter">
    <h1><img src="images/LgWhitepic.jpg" width="410" height="242" /></h1>
  </div>
  <div id="tableright">
    <p align="center"><img src="images/SmWhitepic.jpg" alt="" width="118" height="87"  /></p>
    <p>&nbsp;</p>
    <p align="center"><img src="images/SmWhitepic.jpg" alt="" width="118" height="87" /></p>
    <p>&nbsp;</p>
    <p align="center"><img src="images/SmWhitepic.jpg" alt="" width="118" height="87" /></p>
  </div>
</div>

Answer 1

您可以在<div id="Sitename">Content for id "Sitename" Goes Here</div>内嵌套<div id="tablecenter">，但请移除float: left;并让它display: block;

Answer 2

因为<div id="tableright">在<div id="tablecenter">之后，它从顶部的相同位置开始。像瀑布一样。切换它们。

另一个Div Alignment问题

2 个答案: