边框忽略一个元素

Question

好的，所以我的文字位于更大边框内的边框内。边框内的文本是2行，但问题是较大的边框不会绕过它们。这是一张图片。

我非常肯定的问题是内边框的宽度或浮动使它成为一行。 这是css：

.fifty {
  width: 45%;
  float: left;
}

这是实际边框的css：

.newspaper3 {
border-top: 3px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
padding: 5px;
margin-right: 3px;
}

这是html的一部分：

<div class="count">
<div class="fifty">
<div class="newspaper3">
text
</div>
</div>
</div>

这是所有html和css http://jsfiddle.net/ELSaV/
谢谢你的帮助！

Answer 1

这是你在找什么？

http://jsfiddle.net/gespinha/ELSaV/4/

基本上，您的问题是由float: left元素上的.fifty CSS属性引起的。使用float属性会从实际文档流中删除元素，因此其位置会忽略其位置。

要将其位置重新分配给文档流，您应该在具有clear属性的元素之后添加具有float属性的元素。此clear应具有您希望清除的值。在这种情况下，它应该是left，但是如果您需要稍后在项目中重用此元素，则应创建一个清除both的类。

因此，为了解决您的问题，并将.fifty重新分配给文档流，我创建了一个带有类名div的空.clear元素，并在CSS中将此类归因于clear: both。

.clear { 
   clear: both;
}

为了让.fifty个子项连续显示，您只需要为它们分配相同的float属性，该属性将它们推向同一方向，从而强制它们在父元素中对齐。

.newspaper3 {
    border-top: 3px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
    border-left: 1px solid #EEEEEE;
    border-right: 1px solid #EEEEEE;
    padding: 5px;
    margin-right: 3px;
    float:left; /* ADD THIS */
}

注意：正如我所说，我只是将both的值归因于此clear元素，因为我假设您稍后可能需要在项目中使用它，但在这种情况下，你只需要清除left浮点数。还有其他方法可以在你的花车上建立clear，这只是一种策略。