Question

我需要在屏幕左侧写一个文本，在右侧需要图像。我使用了一个代码，将文本放在侧面的两个图像之间，我希望文本位于顶部，这是我的代码：

<table width="1400" height="10">
  <tr height="10px">
    <td align="left">
      <p style="color:lime; width:50%">
        Text
      </p>
    </td>
    <td align="right">
      <p style="color:Lime; width:50%">
        The next link will send u to the "transfer Market" page
      </p>
      <a href="https://www.transfermarkt.co.uk/lionel-messi/profil/spieler/28003" targer="_blank">The Page</a>
      <br />
      <img src="pics/pic4.jpg" />
      <br />
      <img src="pics/pic6.jpg" />
    </td>
  </tr>
</table>

Answer 1

就像评论中提到的那样，表格不是布局的最佳选择。还有许多其他方法可以做到这一点，包括flexbox，grids甚至是旧的floats。

仅举一个带有浮点数的示例：

    
    .wrapper::after {
      content:'';
      display: table;
      clear: both;
    }
      
    .left, .right {
      display: block:
      position: relative;
      width: 50%;
      float: left;
    }

<div class="wrapper">
  <div class="left">
    <p>Some text</p>
  </div> 
  <div class="right">
    <p>The next link will send u to the "transfer Market" page</p>
    <img src="pics/pic4.jpg" />
    <img src="pics/pic6.jpg" />
  </div>
</div>

我还向包装器中添加了clear: both，因此以下内容不会被浮点数混淆。

HTML，图片和文字

1 个答案: