Question

所以我对html很新，需要帮助格式化。我不是前两个图像，它们之间有10px的空间，但也位于底部图像的上方。香港专业教育学院尝试填充和保证任何想法？

<table>
    <tbody>
    <tr>
    <td>
    <div style="margin-right: 10px;" align="center"><a title="RSA Cat allows you to see what current books that our library and others have based on your own search!" href="http://rsacat.alsrsa.org/uhtbin/cgisirsi/x/0/0/57/49?user_id=DOMINY-MLWEB" target="_blank"><img alt="Resource Sharing Alliance" src="http://0367168.netsolhost.com/tbc1/images/rsaCat.jpg" width="117" height="50" border="5" /></a> <a title="Alliance is one of our two new e-book companies. Choose from hundreds of books to keep with you electronically!" href="http://alliance.lib.overdrive.com" target="_blank"><img alt="Browse downloadable audiobooks and eBooks from Alliance Digital Media Library. " src="http://0367168.netsolhost.com/tbc1/images/AllianceDigitalLibrary.gif" width="99" height="50" border="5" /></a></div>
    <div style="padding-left: 10px;" align="center"></div></td>
    </tr>
    <tr>
    <td colspan="2">
    <div align="center"><a title="The Reaching Across Illinois Library System (RAILS) is one of two multitype regional library systems in the state." href="http://www.alliancelibrarysystem.com/" target="_blank"><img alt="Alliance Library System" src="http://0367168.netsolhost.com/tbc1/images/allianceLogo.jpg" width="160" height="40" border="0" /></a></div></td>
    </tr>
    <tr>
    <td colspan="2">`enter code here`
    <div align="center"><a href="http://dominy.axis360.baker-taylor.com/" target="_blank">Axis 360 Digital Media Library</a></div></td>
    </tr>
    <tr>
    <td colspan="2">
    <div align="center"><span style="color: black;">Browse downloadable audiobooks and eBooks from Alliance Digital Media Library. Your library card and your pin/password are required to download books.</span></div></td>
    </tr>
    </tbody>
    </table>

Answer 1

<div style="margin:auto; width:(xx+yy+10)px;" >
<img src="image1" style="margin-right:10px;" widht="xxpx">
<img src="image2" width="yypx">
</div>
<div style="margin:auto; width:image3widht px;">
<img src="helloworld" style="margin:auto;" width="image3widthpx;">
</div>

请参阅fiddle

Answer 2

我会这样做：

<div class="topRow">
    <a title="RSA Cat allows you to see what current books that our library and others have based on your own search!" href="http://rsacat.alsrsa.org/uhtbin/cgisirsi/x/0/0/57/49?user_id=DOMINY-MLWEB" target="_blank"><img alt="Resource Sharing Alliance" src="http://0367168.netsolhost.com/tbc1/images/rsaCat.jpg" width="117" height="50" border="5" /></a>
    <a title="Alliance is one of our two new e-book companies. Choose from hundreds of books to keep with you electronically!" href="http://alliance.lib.overdrive.com" target="_blank"><img alt="Browse downloadable audiobooks and eBooks from Alliance Digital Media Library. " src="http://0367168.netsolhost.com/tbc1/images/AllianceDigitalLibrary.gif" width="99" height="50" border="5" /></a>
</div>
<div style="padding-left: 10px;" align="center"></div>
<div align="center">
    <a title="The Reaching Across Illinois Library System (RAILS) is one of two multitype regional library systems in the state." href="http://www.alliancelibrarysystem.com/" target="_blank"><img alt="Alliance Library System" src="http://0367168.netsolhost.com/tbc1/images/allianceLogo.jpg" width="160" height="40" border="0" /></a>
</div>
<div align="center">
    <a href="http://dominy.axis360.baker-taylor.com/" target="_blank">Axis 360 Digital Media Library</a>
</div>
<div align="center">
    <span style="color: black;">Browse downloadable audiobooks and eBooks from Alliance Digital Media Library. Your library card and your pin/password are required to download books.</span>
</div>

使用CSS：

.topRow {
    text-align: center;
}

.topRow > a {
    display:inline-block;
}

.topRow > a:first-child {
    margin-right: 10px;
}

成品：http://jsfiddle.net/D7rvc/

如何正确格式化这些元素？我使用了填充和边距。有任何想法吗？

2 个答案: