1

Ok so i have text inside a border that's inside a bigger border. The text inside the border is in a row of 2 but the problem is the larger border doesn't go around them. Here's a picture.enter image description here

The problem i'm pretty sure is either the width or the float of the inside border which makes it a row. Here is the css:

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

Here is the css for the actual border:

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

Here's part of the html:

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

Here's all the html and css http://jsfiddle.net/ELSaV/
Thanks for the help!

4

1 回答 1

2

这是你想要的？

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

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

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

因此，为了解决您的问题，并重新分配给文档流，我创建了一个带有类名.fifty的空元素，并且在 CSS 中我将这个类归为 a 。div.clearclear: 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在您的花车上建立一个，这只是一种策略。

于 2013-10-28T03:07:04.820 回答