CSS有助于与照片和ul列表项对齐

Question

我正在创建一个自定义工具提示插件，并且遇到了CSS和HTML布局的问题。

我想要这样的东西：

嵌套在一些div容器中。

Here是我目前所掌握的JSFiddle，但正如你所看到的 - 我有一些问题。

感谢所有CSS大师！

Answer 1

以下是我为您所做的JSFiddle更新：http://jsfiddle.net/Y2E36/2/我所做的就是将Display:inline-block;添加到status-icons

Answer 2

这是您的基本重新创作。

修正了h2结束标记

Have a jsbin example!

HTML

 <div class="contact">
    <img src="http://www.placehold.it/100X120/FFFFFF" />

    <div class="actions">
      <a href="#" class="phone"></a>
      <a href="#" class="email"></a>
      <a href="#" class="contact"></a>
    </div>

    <div class="details">
      <h1>John Smock</h1>
      <h2>In since Thursday, 5/9/2013 at 9:45 AM</h2>

        <p><span>Lync (Away 5 Min)</span> Lenexa</p>
    </div>
  </div>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Helvetica;
}
.contact {
    height: 120px;
    width: 450px;
    background: #ccc;
    border-top: solid 1px #000;
}
.contact img {
    border-left: solid 12px orange;
    border-right: solid 1px #000;
    float: left;
}
.actions {
    float: left;
    border-right: solid 1px #000;
    margin: 0 10px 0 0
}
.actions a {
    background: url(http://www.placehold.it/20/FFFFFF) no-repeat;
    width: 20px;
    height: 20px;
    display: block;
    margin: 15px 13px;
    border: none;
}
.details h1 {
    font-size: 1em;
    padding: 8px 0 5px;
}
.details h2 {
    font-size: 0.8em;
    font-weight: normal;
    padding: 3px;
}
.details p {
    font-size: 0.8em;
    margin: 48px 0 0;
}
.details span {
    padding: 0 5px 0 0;
    border-right: solid 1px #000;
}