为什么我的div不能正确堆叠？

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 ，以使该行位于您的内容下方，就像我想象的那样。

看看为什么

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;
}

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

链接-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（er）版本 ：当您使用float ，您的元素将不再是常规文档顺序的一部分-且共享相同空间（在这种情况下， div#pressReleaseCenter任何内容）的未浮动元素将单独运行。

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

您根本不需要使用<br />标签。 在上面的示例中。 在hrBreak DIV上使用clear字符，并通过边距或边距（例如div.hrBreak { margin-top: 2em; }或其他任何东西）影响任何所需的间距。

需要注意的一件事-如果您有一个未浮动的DIV（或任何其他包含浮动元素的元素），则可能要使用overflow: auto; 如果您需要该容器展示自己的样式。 例如，如果您希望div#pressReleaseCenter具有边框或背景色，请使用overflow: auto; 将迫使其确认其浮动内容的比例。 如果您不这样做，则可能会发现DIV的显示大小仅与其浮动内容一样大（除非您手动定义了宽度和高度）。