Question

边框无法正确显示。边和底部缺少。
这里的速记属性就像上边界一样属性。
如果我们对容器应用高度标签而不是容器边框显示正确，但它应该独立工作。

CSS

.container
{
  border:1px solid black;
}
.container DIV
{
 width: 15px;
 border: 1px solid Blue;
 margin: 1px;
}

HTML

<div style="width: 200px; " class="container">
   <div style="float: left;">1</div>
   <div style="float: left;">2</div>
   <div style="float: left;">3</div>
   <div style="float: left;">4</div>
   <div style="float: right;">5</div>
   <div style="float: right;">6</div>
   <div style="float: right;">7</div>
   <div style="float: right;">8</div>
</div>

Answer 1

您需要提供更多代码（包括显示实际容器元素的html）。但是，我对你所说的内容的猜测是，添加溢出：隐藏到你的风格应该修复它。

 .container
            {border:1px solid black;
            margin:auto;
            margin-top:33px;
            overflow:hidden;
            }

如果容器中的元素是浮动的，那么容器的行为就像它的高度为0.这会导致边框在顶部是一行。溢出：隐藏赋予它高度，包括任何浮动元素（请参阅http://www.w3.org/TR/CSS21/visudet.html#root-height）

正如我所说的那样，需要更多的代码来说明问题是否是你的情况，但这是造成这种风格问题的常见原因。

Answer 2

更新您的容器类，如下所示。

.container
{
border:1px solid black; 
display:table;
}

Fiddle DEMO

Answer 3

在子元素上使用float属性时。修复它只需在父元素上使用overflow:hidden，即在您的情况下，在类overflow上使用添加.container。

这是 DEMO 。

.container
{
  border:1px solid black;
  overflow:hidden;/* Added Line*/
}

只有顶部边框显示容器周围没有完整的边框

3 个答案: