多个div和媒体播放器的CSS样式

时间:2011-09-29 02:13:12

标签: html positioning css-float padding

我正在尝试设置以下页面的样式:

http://www.davedaranjo.com/media.html

我遇到的问题是我真的需要将div左侧和div放在页面右侧。有人可以建议一种样式或属性,只是将标题下的整个部分移动到页面中间吗?

谢谢!

2 个答案:

答案 0 :(得分:0)

几点。

  1. shouldn't use tables for layouts
  2. 音乐播放器不属于您的div#right,JavaScript会在您的< div align =“center”>之后插入它。
  3. 但是,如果您想坚持使用该网站,以下内容将为您提供所有组件的中心:

    <body style="width: 1024px; margin: 0 auto;">
    

    注意,CSS应存储在file external to your HTML中。如果您使用单独的文件,请在其中添加以下内容:

    body { width: 1024px; margin: 0 auto; }
    

答案 1 :(得分:0)

你可以做的一件事就是让它在身体中与中心对齐的div也包含带有ttw-music-player类的div。

旁注:我不确定你是否知道这一点,但ttw-music-player div是右边的实际内容。 id为'right'的div中没有​​任何内容,因为那里的javascript实际上没有在页面上放置任何内容。

执行此操作后,您可以设置居中div,使其具有特定宽度,并将其设置为margin: auto;而不是align: center;。这将把标题和左右内容div加入到容器中。在此之后,在左侧和右侧div上指定固定宽度,以便它们占用相等的空间,该空间恰好与容器div的宽度相加。然后向左和向右浮动一个。您可能需要使用widthpadding和/或margin来完成所有像素完美处理。

另外,我建议不要将表格用于除实际数据表之外的任何内容,并使用<head>中的CSS文件进行所有样式设置。通常,您应远离html文件本身内部的内联样式,只需使用JavaScript在元素上添加或删除CSS类,只有在绝对必要时才从JavaScript中触发内联样式。以这种方式维护要容易得多。