时间戳

首页 > 解决方案 > HTML、图片和文本

html - HTML、图片和文本

问题描述

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

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

标签： htmlcss

解决方案

就像评论中提到的那样，表格不是布局的最佳选择。还有很多其他的方法可以做到这一点，包括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包装器中添加了一个，因此以下内容不会被浮动混淆。

推荐阅读