代码之家  ›  专栏  ›  技术社区  ›  regex

使用绝对定位而不是浮子定位柱

  •  1
  • regex  · 技术社区  · 16 年前

    我读过几篇关于网站内容模板的文章。他们似乎都建议通过浮动将列放置在您的网站上。例子:

    <div id="container" style="width: 1000px;">
        <div id="main_content" style="border: solid 1px Black; width: 798px; /* width = 800px -2px for border */ float: left; height: 400px;" ></div> 
        <div id="links_menu" style="border: solid 1px Black; width: 198px; float: right; height: 600px;"></div>      
    </div>
    


    然而,每当我使用浮点数时,我总是设法破坏我的内容。我花了更多的时间来决定把我的东西放在哪里 <div syle="clear:both;" /> 比我实际设计网站的外观和感觉更重要。此外,每当我放置我们的第三方时 ComponentArt 在浮动容器内的控件中,它设法被破坏,并要求我指定高度和宽度,这些高度和宽度直到运行时才确定。


    此外,我发现当我使用绝对定位时,事情似乎对我来说更好。例如:

    <div style="width: 1000px; height: 600px; position: relative;">
        <div style="border: solid 1px Black; width: 798px; position: absolute; top: 0; left: 0; height: 400px;"></div>
        <div style="border: solid 1px Black; width: 198px; position: absolute; top: 0; right: 0; height: 600px;"></div>
    </div>
    


    不管怎样,我对样式表和HTML还是比较陌生的,所以我想把这个扔给大家,看看你们对这种内容放置的替代方案有什么看法。你认为这种方法有什么负面影响吗?我在大多数浏览器中都尝试过,它们似乎都能正确呈现,但我不知道未来会怎样。..或者,有人可以推荐一种更好的方法来浮动我的容器,这样内部内容就不会浮动。我绝对愿意接受建议,并感谢您提供的任何反馈。

    提前感谢您的帮助!

    CJAM

    2 回复  |  直到 16 年前
        1
  •  3
  •   David Kolar    16 年前

    绝对定位容器的一个大问题是,当你事先不知道它们的高度时,把内容放在它们下面的页面上。在您的示例中,您定义了绝对定位元素的高度,因此这对您来说应该不是问题。如果它对你有效,就使用它。

        2
  •  1
  •   Jason    16 年前

    用css实现某件事真的没有对错之分。这更多的是关于有效性/灵活性。

    使用列布局的绝对位置可以减少这种情况。插入、删除列将要求您重新计算所有位置。如果同一样式的列有多个实例怎么办?我们不能100%重复使用这种样式,因为它是绝对定位的。

    列布局有很多方法。看看一些@ listapart , positioniseverything