Question

我正在网站上工作，出于某种原因，我的Divs表现得非常奇怪。

我不确定为什么会这样。

HTML

<div class="row" id="information">
    <div id="informationContent" class="large-12 columns noSlideshow">
        <div id="pressReleaseCenter">
            <h2>Press Release</h2>
            <div class="pressImages"><a href="http://www.prweb.com/releases/2013/12/prweb11393087.htm"><img src="images/voip_vid_logo.png" height="200" width="200"></a></div>
            <div class="pressText" id="press1">December 04, 2013<br />VoIP Innovations is now accepting requests for the new Toll-Free area code<br />Due to the popular demand of Toll-Free numbers, the FCC<br />will introduce 844 as the newest area code on Saturday, December 7.<br />Starting on Saturday, December 7, everyone will have the opportunity to select 844 as <a href="http://www.prweb.com/releases/2013/12/prweb11393087.htm"> more</a></div>
            <br />
            <div class="hrBreak"></div>
        </div>
    </div>
</div><!--End Row-->

CSS

/*Float press release images*/
#pressReleaseCenter{
    width:960px;
   margin: 0 auto;
 /*  background-color:green;*/
   height:initial;
}

.pressImages{
   /* background-color:yellow;*/
    height:auto;
    width:30%;
    float:left;
    height:91px;
}

.pressText{
   /* background-color:orange;*/
    text-align:left;
    width:70%;
    float:left;
    height:91px;
    bottom:0;
}

.hrBreak{
    width:100%;
    height:3px;
    background-color:white;
    position:relative;
}

#press1{
    padding-top:10px;
}

此外，还有更好的方法吗？我考虑使用一张桌子。这会在这种情况下起作用吗？我希望以相同的格式继续提供更多信息。

Answer 1

不要使用表格进行布局。这不再是完成的事情了。您实际上没有指定它应该如何显示，但看起来您需要将clear: both;添加到.hrBreak，以便让线条位于您想要它应该做的内容之下。< / p>

See here as to why

Answer 2

简单的解决方案：

将float属性用于分割时，这是一个常见问题。我曾经遇到过同样的问题。

在HTML文件和CSS文件中添加以下代码：

HTML：

<div class="row" id="information">
    <div id="informationContent" class="large-12 columns noSlideshow">
        <div id="pressReleaseCenter">
            <h2>Press Release</h2>
            <div class="pressImages"><a href="http://www.prweb.com/releases/2013/12/prweb11393087.htm"><img src="images/voip_vid_logo.png" height="200" width="200"></a></div>
            <div class="pressText" id="press1">December 04, 2013<br />VoIP Innovations is now accepting requests for the new Toll-Free area code<br />Due to the popular demand of Toll-Free numbers, the FCC<br />will introduce 844 as the newest area code on Saturday, December 7.<br />Starting on Saturday, December 7, everyone will have the opportunity to select 844 as <a href="http://www.prweb.com/releases/2013/12/prweb11393087.htm"> more</a></div>
            <br />

<!-- ADD THE BELOW LINE -->
            <div class = "clear"></div>

            <div class="hrBreak"></div>
        </div>
    </div>
</div><!--End Row-->

将以下代码添加到CSS：

.clear{
    clear: both;
}

以下是发生这种情况的原因：

Link-1

Link-2

希望它对你有所帮助。

Answer 3

考虑将每个新闻稿包装在一个元素中，以便您可以设置组成新闻稿的元素组。您可以将它们包含在其他div标记或ul li中。然后，您可以完全删除额外的<br>代码和<div class="hrBreak"></div>。

http://jsfiddle.net/h7GpT/是一个使用无序列表的示例。

Answer 4

我假设您的主要问题是hrBreak div与前两个DIV重叠。

简短版：将clear: left;添加到.hrBreak可以快速解决问题。这使得DIV出现在它之前的任何左浮动元素之下。 clear: both;也可以使用，但有些旧浏览器有时会遇到这种特殊选项（如果只需要，请使用clear: left;）。

Long（呃）版本：当您使用float时，您的元素不再是常规文档订单的一部分 - 以及共享相同空间的未展开元素（在这种情况下），div#pressReleaseCenter内的任何内容都将单独运作。

如果在浮动元素之后之后有一些内容，您可以最轻松地使用clear: left;或clear: right; CSS来确保内容（或clear: both;，如前所述，以及少数浏览器可能会遇到的警告。

您根本不需要<br />标记。在上面的例子中。使用hrBreak DIV上的clear并使用边距或填充（例如，div.hrBreak { margin-top: 2em; }或其他任何内容）影响任何所需的间距。

有一点需要注意 - 如果你有一个包含浮动元素的未展开的DIV（或任何其他元素），如果你需要那个容器，你可能想要使用overflow: auto;展示自己的任何造型。例如，如果您希望div#pressReleaseCenter具有边框或背景颜色，则使用overflow: auto;会强制它确认其浮动内容的比例。如果您不这样做，您可能会发现您的DIV只显示与其未开启的内容一样大（除非您手动定义了宽度和高度）。

为什么我的div没有正确堆叠？

4 个答案: