0

我正在尝试弄清楚如何正确使用 to:after和:beforeCSS，并将样式应用于此：

在此处输入图像描述

这里的目标是在父框内适应框的固定宽度和高度（不确定我是否正确地说）。

里面的盒子正在过去或溢出。

无论子框有多大，如何设置父框进行调整？我在这里提到的子框是深灰色框。

<div class="connections-label">
    <div class="connections-avatar"></div>
    <h3><a href="">Christian Blanquera</a></h3>
    <h4>Invested over 5 million cookies in 20 startups</h4>
</div>

.connections-label a 
{
    color:#1c89cc; 
    text-decoration:none
}

.connections-label h4
{
    color:#686868;
    font-style:italic;
}

.connections-avatar
{
    width:50px; 
    height:50px; 
    float:left; 
    background-color:grey; 
    margin-right:10px
}

.connections-label:after
{
    content:"";
}
4

1 回答 1

3

您正在寻找 CSS clearfix 解决方案。基本上，浮动元素会从文档的正常流程中移除，并且必须包含在. 最简单的 clearfix 是应用于overflow: hidden;包含浮动元素的元素：

.connections-label {
  overflow: hidden; }

这通常足以满足大多数浮动遏制方案。然而，定位的元素和溢出的内容也会被这个 CSS 剪裁掉。更复杂的 clearfix 将包含浮动元素而不隐藏定位元素，记录在上面的文章中：

.connections-label:before,
.connections-label:after {
  content: '';
  display: table; }
.connections-label:after {
  clear: both; }

/* IE6/7 support */
.connections-label {
  display: inline-block; }
.connections-label {
  display: block; }

另外，我最近学到的另一个技巧是，应用于overflow: hidden;浮动元素左侧或右侧的元素可以防止该元素包裹在浮动元素下方。看比描述更容易，所以看看我的jsFiddle 演示。

于 2013-08-08T00:33:00.407 回答