Question

这是我现在开始做的事情，我有一个名为frontwidth的div id css，它拥有1个img 1标题和1个文本。

当我做第二个或第三个正面宽度时，它会放在自身后面而不是在下面和下面。

帮助:-（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。
在.frontwidth上，添加overflow: hidden（至clear the floats）。
在.titlesmedium和.homepagetext上添加margin-left: 340px。

Answer 2

您已将所有内容定位在frontwidth divs绝对值内。绝对定位将元素从流中取出，所有其他元素的位置就好像它们不在那里一样。

最好的解决方案是不使用position: absolute（通常无论如何都是“最后的手段”）。而是将图像向左浮动，并为标题和文本提供左边距。

更多建议：

您的许多图片都缺少alt属性。
您的源代码是一个很大的div汤。 “无表格布局”并不意味着“仅使用div s”。不要在div s中包装东西以获取它。例如，不必将每个图像包装在div中。您可以将样式直接应用于图像。并使用有意义的元素（如h1，h2等）作为标题，p表示文字段落，ul和li表示列表（菜单）等。 div也是“最后的手段”。只有在没有其他HTML元素适合时才使用它们。

Answer 3

问题在于你使用position：absolute和position：relative。

如果从css中删除它们，则不再堆叠在一起。尝试删除那些然后调整html

Answer 4

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

要使一个元素与另一个元素相邻，您可以使用float。例如，向左浮动图像然后向左浮动标题。这会将标题放在图像旁边。之后，请务必使用clear来重新开始流动元素。或者，摆脱所有额外的div - 你通过添加许多额外的元素来改变布局。要包装和样式化内联元素，请考虑使用<span>标记。

Div定位问题

4 个答案: