表HTML和CSS

-2

我想这个图片里面的表：http://postimg.org/image/tlkfdlao3/ 像对齐：http://postimg.org/image/motp2rkit/ 这是我的HTML代码：表HTML和CSS

<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; 
}

来源

2013-03-21 Giova Fila

表格不应用于布局。它们应该用于表格数据。 – isherwood 2013-03-21 15:30:48

欢迎来到2013年！你应该真的考虑放弃表格的布局，而是使用适当的元素和CSS。 – 2013-03-21 15:30:50

我该怎么办？ – 2013-03-21 15:31:14

这里的一个粗略的想法，你可能会用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>

来源

2013-03-21 15:47:07 isherwood

您应该使用锂例如

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

这是你可以做的布局最好的！

来源

2013-03-23 17:17:23

回答

相关问题