【问题标题】:Another Div Alignment issue另一个 div 对齐问题
【发布时间】:2012-12-25 00:16:25
【问题描述】:

我刚刚在这里发布了一个关于 div 对齐的问题。我最初的问题得到了回答,但现在我又遇到了另一个问题。链接到我正在尝试做的事情:Click here for the images(点击链接没有任何害处)顺便说一句,这不适合做作业。链接上的顶部图像(我在 Fireworks 中创建的东西)是我第一次尝试做的布局(我解决了这个问题),但现在我正在尝试添加一个站点名称 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>

【问题讨论】:

  • 段落不是图片的合适容器。您应该使用样式化的无序列表。
  • 添加了段落标签以创建额外的空间。不过这些都不是问题,因为我在添加 Sitename div 之前就已经加入了。无论我做什么都是在添加最后一个 div 时,但我一直盯着这个很长时间,无法弄清楚当时发生了什么。

标签: css html css-float alignment floating


【解决方案1】:

您可以将&lt;div id="Sitename"&gt;Content for id "Sitename" Goes Here&lt;/div&gt; 嵌套在&lt;div id="tablecenter"&gt; 中,但删除float: left; 并让它display: block;

【讨论】:

  • 天啊,我真是个白痴。谢谢maceyj2。效果很好。如果我停下来休息一下,我会注意到这样的事情!
  • 我确实把浮动留在了里面,它也可以这样工作。
  • 乐于助人!但如果不需要,您应该删除浮动 - 优化您的 CSS!
【解决方案2】:

因为&lt;div id="tableright"&gt;&lt;div id="tablecenter"&gt; 之后,所以它从顶部的相同位置开始。像瀑布一样。 切换它们。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2013-07-12
    • 2015-11-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-08-30
    • 2014-12-23
    相关资源
    最近更新 更多