Question

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="cook.js"></script>
<link rel="stylesheet" type="text/css" href="css/cook.css">

<details>
  <summary>TEST</summary>
  <p> - bknf;nvdnvdnvldnvldvldbvldvbldvbldvvvbkh.</p>
</details>

<img src="oasis-and-car.png">
<details>
  <summary>TEST</summary>
  <p> - bknf;nvdnvdnvldnvldvldbvldvbldvbldvvvbkh.</p>
</details>

<details>
  <summary>TEST</summary>
  <p>thestttttttt</p>
</details>

我想在图像旁边添加一些项目符号，例如一些说明，当您单击项目符号时，它会向您显示信息，例如this网站上有太阳能电池板的位置，以及当您单击时加号会为您提供信息。我的在工作，唯一的问题是他们不在正确的地方，我希望他们站在一边。在Wordpress中也有为此插件吗？

Answer 1

您可以使用绝对位置。这是一个例子。

.pos1{ 
  position: absolute;
  top: 100px;
  left: 100px;
}

.pos2{ 
  position: absolute;
  bottom: 150px;
  right: 150px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="cook.js"></script>
        <link rel="stylesheet" type="text/css" href="css/cook.css">
  </head>
  <body>
  
   <details class="pos1">
  <summary>TEST</summary>
  <p> - bknf;nvdnvdnvldnvldvldbvldvbldvbldvvvbkh.</p>
	</details>
  
  <img src="oasis-and-car.png" >
  <details class="pos2">
  <summary>TEST</summary>
  <p> - bknf;nvdnvdnvldnvldvldbvldvbldvbldvvvbkh.</p>
	</details>
  
  
   <details>
  <summary>TEST</summary>
<p>thestttttttt</p>
	</details>
  
  
  
  

  </body>
</html>

如何在图像上添加细节？

1 个答案: