Question

如何使标题范围标记看起来像是在图像的右上角，而描述范围标记看起来像是图像右下角的描述？

我尝试使用位置，但它的编码很难，我不认为这是一个答案。任何的想法？感谢。

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <style>
    #a{
      font-size: 20px;
    }
    #b{
      font-size: 10px;
    }
  </style>
</head>

<body>
  <div>
    <img src="https://www.gravatar.com/avatar/c5e2da1f5d1be77ee31491432c3b793f?s=32&d=identicon&r=PG" alt="Img" id="i" />
    <span id="a"> Heading </span>
    <span id="b"> Description </span>
  </div>
</body>
</html>

Answer 1

使用position: relative;将<div>和position:absolute;包裹到内部的元素中。

div {
  position: relative;
  border:solid 1px red;
}

span#a {
  position:absolute;
 top: 0px;
 right: 0px;
}


span#b {
  position:absolute;
 bottom: 0px;
 right: 0px;
}

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <style>
    #a{
      font-size: 20px;
    }
    #b{
      font-size: 10px;
    }
  </style>
</head>

<body>
  <div>
    <img src="https://www.gravatar.com/avatar/c5e2da1f5d1be77ee31491432c3b793f?s=32&d=identicon&r=PG" alt="Img" id="i" />
    <span id="a"> Heading </span>
    <span id="b"> Description </span>
  </div>
</body>
</html>

Answer 2

您可以将标题和说明括在一个div中（例如description）。并向左或向右浮动img和.description（无论你想要的地方）。

试试这个：

<!doctype html>
  <html>
  <head>
    <meta charset="utf-8" />
    <style>
      img {
        float:left;
      }
      .description {
        float:left;
      }
      #a{
        font-size: 20px;
      }
      #b{
        font-size: 10px;
      }
    </style>
  </head>

  <body>
    <div>
      <img src="https://www.gravatar.com/avatar/c5e2da1f5d1be77ee31491432c3b793f?s=32&d=identicon&r=PG" alt="Img" id="i" />
      <div class="description">
        <div id="a"> Heading </div>
        <div id="b"> Description </div>
      </div>
    </div>
  </body>
  </html>

Answer 3

尝试这样的事情。这很容易

＆＃13;

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <style>
    #a{
      font-size: 20px;
    }
    #b{
      font-size: 10px;
    }
  </style>
</head>

<body>
    <table>
<tr><td rowspan="2"><img src="https://www.gravatar.com/avatar/c5e2da1f5d1be77ee31491432c3b793f?s=32&d=identicon&r=PG" alt="Img" id="i" /></td>
    <td><span id="a"> Heading </span></td></tr>
    <tr><td><span id="b"> Description </span></td></tr>
  </table>
</body>
</html>

＆＃13;

什么是标题和描述的CSS设计代码？

3 个答案: