html - 将文本与缩略图下的链接对齐，并将缩略图对齐到左上角-6ren

html - 将文本与缩略图下的链接对齐，并将缩略图对齐到左上角

转载作者：行者123 更新时间：2023-11-28 06:43:48

我的代码在下面，底部有一个缩略图，我希望下载链接和文本出现在缩略图下方，并且缩略图出现在标题/横幅下方黑色背景的左上角。有人可以帮忙吗？

<body 
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<br>
<table width="768" border="0" align="center" cellpadding="4" cellspacing="2" style="text-align: center">
<tr>
  <td height="70" colspan="3" align="center" valign="middle" bgcolor="#000000">
    <img src="https://farm1.staticflickr.com/756/23511757696_469b593243_b.jpg" </h1></td>
</tr>
<tr>
  <td colspan="3">
    <div style="text-align: center; width: 100%">
              <a href="https://facebook.com/PhotographyBok" target="_"><input 
type="button" value="Timeline"/></a>
      <a href="https://500px.com/marcus_bok" target="_"><input 
type="button" value="Portfolio"/></a>
      <a href="https://facebook.com/PhotographyBok/app/251458316228/" target="_"><input 
type="button" value="Shop Now"/></a>
      <a href="https://www.facebook.com/PhotographyBok/app/128953167177144/" target="_"><input 
type="button" value="Downloads"/></a>
      <a href="https://www.facebook.com/PhotographyBok/info/" target="_"><input 
type="button" value="About Me"/></a>
<div class="fb-like" data-href="https://facebook.com/photographybok" data-layout="button" data-action="like" data-show-faces="true" data-share="true">
                       </div>
                       </tr>
                       <td height="568" border="4" align="centre" valign="middle" bgcolor="#000000">
                          <img align="left" src="https://farm6.staticflickr.com/5685/22966400834_ca5b8b1cae_h.jpg" class="img-with-text" alt="Texture Download" width="204" height="136"> <a href="https://www.dropbox.com/s/2zikce9elhkg2qi/12333083_10153200931056625_1694988016_o.jpg?dl=0">Download Photoshop Texture</a>
                       </td>
</td>

最佳答案

HTML是一种标记语言，每个标签都用<>表示符号并以 </> 结束符号。您有许多不正确编写的标签。我检查了代码，关闭(或删除)未关闭的代码。

现在您有一个包含 4 行的表格，其中第四行是缩略图下方的文本和链接。您可以更多地使用表格单元格 (<td>) 放置，但按照 Flignats 的建议，您应该学习一些基本的 HTML/CSS 布局并替换当前的表格布局。

这里有一些关于您的代码的附加说明，如果您使用的话:

使用有意义的缩进
您正在混合内联 CSS 样式和 HTML 属性，请改用 CSS 文件
脚本通常放在结束的 body 标签之前，因此它们不会干扰加载元素

<body>
  <div id="fb-root"></div>
  <br>
  <table width="768" border="0" align="center" cellpadding="4" cellspacing="2" style="text-align: center">
    <tr>
      <td height="70" colspan="3" align="center" valign="middle" bgcolor="#000000">
        <img src="https://farm1.staticflickr.com/756/23511757696_469b593243_b.jpg">
      </td>
    </tr>
    <tr>
      <td colspan="3">
        <div style="text-align: center; width: 100%">
          <a href="https://facebook.com/PhotographyBok" target="_">
            <input type="button" value="Timeline" />
          </a>
          <a href="https://500px.com/marcus_bok" target="_">
            <input type="button" value="Portfolio" />
          </a>
          <a href="https://facebook.com/PhotographyBok/app/251458316228/" target="_">
            <input type="button" value="Shop Now" />
          </a>
          <a href="https://www.facebook.com/PhotographyBok/app/128953167177144/" target="_">
            <input type="button" value="Downloads" />
          </a>
          <a href="https://www.facebook.com/PhotographyBok/info/" target="_">
            <input type="button" value="About Me" />
          </a>
          <div class="fb-like" data-href="https://facebook.com/photographybok" data-layout="button" data-action="like" data-show-faces="true" data-share="true">
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td height="136" border="4" align="centre" valign="middle" bgcolor="#000000">
        <img align="left" src="https://farm6.staticflickr.com/5685/22966400834_ca5b8b1cae_h.jpg" class="img-with-text" alt="Texture Download" width="204" height="136">
      </td>
    </tr>
    <tr border="none" align="left">
      <td>
        <a href="https://www.dropbox.com/s/2zikce9elhkg2qi/12333083_10153200931056625_1694988016_o.jpg?dl=0">Download Photoshop Texture</a>
      </td>
    </tr>
  </table>
  <script>
    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s);
      js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
  </script>
</body>