Div定位问题

Question

现在开始做我的头，我有一个名为frontwidth的div id css，其中包含1 img 1标题和1个文本。

当我做第二或第三frontwidth其铺设自己身后，而不是去下，背面..

帮助:-(提前http://www.e-fluential.com/offline/

感谢

Answer 1

按我的评论：

哇，这是..一个独特的方法？你 有太多的position: absolute 和position: relative。我只是修复了这个在Firebug中的 ，但它要去 需要几分钟的时间写一个答案， 规则的数量我不得不切换 并添加。

从这些元素中取出position规则：

• #mainbody。
• #frontwidth。
• #titlesbig。
• #greyline。
• #homepageimage。
• #titlesmedium。
• #homepagetext。
• 希望我没有忘记任何：d

随着mainbody例外，你使用其中每一元素多次。因此，改用class代替。

例如，在你的HTML，更改为：

<div class="frontwidth"> 

而在你的CSS，更改为：

.frontwidth { 

} 

现在我们可以为你希望他们奠定了这些元素：

• 对.homepageimage，加float: left。
• On .frontwidth，add overflow: hidden（to clear the floats）。
• On .titlesmedium and .homepagetext add margin-left: 340px。

Answer 2

问题在于您的使用情况的位置：绝对位置和相对位置：

如果从css中删除这些文件，则不再堆叠在彼此之上 尝试删除这些文件，然后调整t他html

Answer 3

如果从homepageimage，titlesmedium和homepagetext类中删除position: absolute，大部分布局会自行排列。各种position: relative元素不会造成问题，因为它们没有任何对顶部，底部，左侧或右侧的引用 - 实质上，它们根本不会改变布局。

要使一个元素相邻，可以使用float。例如，将图像浮起，然后将标题左移。这会将标题放置在图像旁边。之后，一定要使用clear来再次正常启动流动元素。另外，摆脱所有额外的div - 你通过增加许多额外的元素来改变布局。为了包装和设计内联元素，请考虑使用<span>标记。

Answer 4

您已将frontwidth divs中的所有内容定位在绝对位置。绝对定位将元素排除在流程之外，并将所有其他元素定位，就好像它们不在那里一样。

最好的解决方案是不使用position: absolute（这是通常使用的“最后的手段”）。而是将图像左移，并为标题和文本留出左边距。

一些更多的建议：

• 很多图片的缺乏alt属性。
• 你的源代码是一个大div汤。 “无表格布局”并不意味着“仅使用div”。不要把东西包装在div中。例如，不需要将每个图像包装在一个div中。您可以将样式直接应用于图像。并使用有意义的元素，如h1,h2等用于标题，p用于文本段落，ul和li用于列表（menues）等。div也是“最后的手段”。只有在没有其他HTML元素适合的情况下才使用它们。