标题显示在浮动图像上方而不是右侧

问题描述 投票：2回答：2

我有一篇文章，其中包含一个标题（h4），一个向左浮动的图像和一些文本。

  • 当标题位于HTML声明中的图像之前时，它将显示在图像上方。
  • 当图像位于标题之前时，标题显示在图像的右侧。

这是HTML：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    img {
      margin: 1em;
      border: 1px solid black;
      float: left;
    }
  </style>
</head>

<body>
  <article id="a1">
    <h4>Title is above image</h4>
    <img src="images/about.jpg" alt="about" /> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
    it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
    and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </article>
  <hr/>
  <article id="a2">
    <img src="images/about.jpg" alt="about" />
    <h4>Title is to the right of image</h4>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.
  </article>
</body>

</html>

上面的HTML呈现如下：

This produces the page below

当标题在HTML中的图像之前时，如何使用CSS将标题呈现在图像的右侧？我正在寻找一种解决方案，其中HMTL不会以任何方式改变。

css html5 alignment css-float css-position
2个回答
1
投票

自然就是改变标记 - 这是一个使用定位和负边距的笨拙的黑客（假设图像宽度是固定的） - 见下面的演示：

article {
  clear: both; /* clear the float after each article - this is important */
}

img {
  margin: 1em;
  border: 1px solid black;
  float: left;
}

#a1 {
  padding-top: 30px; /* put some space at the top */
}

#a1 h4 {
  position: absolute; /* positione the title in that space*/
  left: 240px;
  top: -10px;
}

#a1 img {
  margin-top: -15px; /* shift the image to the top */
}
<article id="a1">
  <h4>Title is above image</h4>
  <img src="https://via.placeholder.com/200" alt="about" /> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
  of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
  Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</article>
<hr/>
<article id="a2">
  <img src="https://via.placeholder.com/200" alt="about" />
  <h4>Title is to the right of image</h4>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.
</article>
1
投票

<h4>有一个默认的display块，占据了整条线。给它display: inline;的风格，它将使图像和文本在同一行。由于图像有float: left;，它会自动向左移动。然而，由于文本仍然在<h4>旁边，并且几个<br>是为了使它成为你想要的。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    img {
      margin: 1em;
      border: 1px solid black;
      float: left;
    }
  </style>
</head>

<body>
  <article id="a1">
    <h4 style="display: inline;">Title is above image</h4>
    <img src="images/about.jpg" alt="about" /> <br><br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
    it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
    and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </article>
  <hr/>
  <article id="a2">
    <img src="images/about.jpg" alt="about" />
    <h4>Title is to the right of image</h4>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.
  </article>
</body>

</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.