html - HTML 和 CSS 中的表格

Question

我希望这张图片中的表格：http://postimg.org/image/tlkfdlao3/ 像这样对齐：http: //postimg.org/image/motp2rkit/ 这是我的 Html 代码：

<table>
<tr>
    <td width="132px">
            <span>iNotes è qui!</span>
            <br />
            <p id="inotesText">Una nuova app per prendere note in un modo completamente nuovo ed intuitivo!</p>
    </td>
    <td width="52px">
        <img src="images/pencil.png" alt="pencil" />
    </td>
 </tr>
 </table>

和 CSS：

#pencil {
padding-left:0px;
width: 52px;
height: 204px;
}

#appStoreAvailable {
padding-top:50px;
width: 149px;
height: 101px;
}

#description1 {
}

#description1 span  {
color:#2d2d2d;
font-size:16px;
}

#inotesText {
text-align: left;
font-weight: 400;
font-size: 13px;
color: #616161;
}

Answer 1

例如，您应该使用 li

<ul class="yourclass">
<li>
  Yourcontent
</li>
</ul>

这是你能做的最好的布局！

Answer 2

这是一个粗略的想法，您可以如何使用 CSS 进行布局。意识到这是不完整的，并且没有考虑浏览器的变化。

http://jsfiddle.net/93TBf/2

.wrapper {
    margin: 30px;
    padding: 15px;
    display: inline-block;
    overflow: hidden;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 2px 2px 15px #aaa;
    font-family: arial;
}
.header {
    border-bottom: 1px solid #bbb;
    padding: 8px 0;
    overflow: hidden;
}
.icon {
    float: left;
    margin-right: 10px;
}
.item {
    float: right;
    margin-left: 10px;
}

<div class="wrapper">
    <div class="header">
        <img class="icon" src="http://placehold.it/50x50" />
        <strong>iNotes HD</strong>
        <br />Utility
        <button>0,89 $</button>
    </div>
    <div class="body">
        <img class="item" src="http://placehold.it/50x150" />
         <h2>iNotes e qui!</h2>
        Una nuova app per prendere note in un
    </div>
</div>