表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

回答

相關問題