我如何正确地解决这个div的内容？

Question

我正在努力提高我的基本设计“技能”。我正在尝试重新创建： 但是我不知道如何用正确的CSS正确地格式化它。

.container {
    width: 40%;
    height: 107px;
    background: #fff;
    position: relative;
}

.cover {
    position: absolute;
    left: 10px;
    top: 5px;
}

.icon {
    position: absolute;
    right: 10px;
    bottom: 10px;
}

#container h3, p {
    color: #000;
    position: absolute;
    left: 60px;
    top: 15px;
    margin: 5px;
}

<div class="container">
    <img class="cover" src="book.png" width="45" height="60"/>
    <h3>Title of Something</h3>
    <p> Cracking the code </p>
    <img class="icon" src="icon.png" width="45" height="40"/>
</div>

有什么建议吗？

Answer 1

这是修复问题的方法，你的html工作正常 只需要编辑css。

CSS

.container {
width: 40%;
height: 107px;
background: #fff;
position: relative;
    float:left
}

.cover {
position: absolute;
left: 10px;
top: 5px;
}

.icon {
position: absolute;
right: 10px;
bottom: 10px;
top: 15px
}

h3, p {
color: #000;
position: relative;
left: 60px;
top: 15px;
margin: 5px;
}

DEMO

Answer 2

这是一个非常简单的解决方案：http://codepen.io/elstermann/pen/oXRVxG

HTML

<header>
  <img id=img-book alt=book src=http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png width=158 height=158>
  <div id=title>
    <h3>Title of Something</h3>
    <p id=h1-sub>Title of Something</p>
  </div>
  <img id=img-face alt=book src=http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png width=158 height=158>
</header

CSS

header {
  margin: 0 auto;
  max-width: 950px;
  min-width: 500px;
  width: 90%;
}

#img-book, #title {
  float: left;
}

#img-face {
  float: right;
}