两列 - 图像，文本 - 对齐不起作用

Question

我无法弄清楚我做错了什么......

我在css中有这个：

.teamblock {
    position: relative;
}
.teamimage {
    float:left;
    width:20%
}
.teamtext {
    float: left;
    padding: 10px;
    width:60%;
}

在html中，我的结构如下：

<div class="teamblock">
    <div class="teamimage">
        <img src="some image">
    </div>
    <div class="teamtext">
        Some text
    </div>
</div>

起初它似乎正在起作用。但请看这里：

http://dev.pfp-consortium.org/index.php/about/meet-our-team

我无法弄清楚这是怎么可能的......

谢谢！

Answer 1

这也适用于白色宽度

所以你有：

.teamblock{
position: relative;
display: inline-block;
overflow: hidden;
margin: 5px;
width: 100%;
background: #ffffff;
}

它适用于我看到：

Answer 2

你需要在每个人之后清楚，有更多的方法可以做到这一点。其中之一是将overflow: hidden;添加到.teamblock。

.teamblock {overflow: hidden}

Answer 3

我建议使用display: inline-block。

.teamimage {
    width: 20%;
    display: inline-block;
    vertical-align: top;
}
.teamtext {
    vertical-align: top;
    padding: 10px;
    width: 75%;
    display: inline-block;
}

截图：

Answer 4

添加一类＆＃39; clearfix＆＃39;需要在容器周围的容器中使用＆＃39; float＆＃39;属性。

首先添加明确：两者

.teamimage {
    clear:both;
}

然后像这样添加一个clearfix到.teamblock：

在你的css中添加这个

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }

然后编辑html并将类添加到div

<div class="teamblock clearfix" ></div>

在此处阅读有关clearfix的所有内容：http://css-tricks.com/snippets/css/clear-fix/