我目前正停留在这个问题上。我想在图片的我的段落NEXT上方放置hr元素。我遇到了这个问题,每次我尝试将hr元素显示为内联块时,它将变成一个非常小的点,并且不会移动到图像的侧面,而是停留在下面(与段落一起)图像好像是作为块显示一样。但是,如果删除hr元素,则该段落将移至图像的侧面。即使我将hr元素显示为inline-block,它也无济于事,并且实际上使情况更糟。溢出:隐藏;也不起作用。

我试图更好地理解代码,所以这是我正在从事的实践项目。



.water-bottle {
  height: 20%;
  width: 20%;
  border: 10px solid #01666d;
  border-radius: 100%;
  padding: 10px;
  margin-left: 15%;
  margin-top: 10%;
  margin-bottom: 20%;
  display: inline-block;
  transform: rotate(25deg);
}

main p {
  color: #00a4af;
  float: right;
  font-size: 15px;
  max-width: 30%;
  margin-right: 20%;
  margin-top: 15%;
  line-height: 40px;
}

hr {
  /* This makes the lines above the paragraphs */
  border-style: solid;
  border-width: 3px;
  border-color: #01666d;
  max-width: 50px;
  margin-bottom: 5px;
}

<main>
  <div class="main-page">
    <img src="images/Water/waterbottle.png" class="water-bottle">

    <p>
      <hr>In 2013, Americans ALONE generated about 254 million tons of trash. Could you imagine what the Earth will look like in 20-30 years if this continued year by year? Trash pollution is a serious issue. It will continue to be an issue until we step
      up and be concious of our daily behaviour. Which is why we decided to make a change NOW. Introducing, the 100% ECO friendly water bottle!
    </p>
  </div>
</main>

最佳答案

为了在img旁边排列hr,它们必须在同一块级父级中。将hr元素放置在<p>元素中,将<hr>放置在与图像完全不同的块级父级中,这样它们就不会彼此相邻排列。我从<hr>元素中删除了<p>并提出了以下代码。

但是,您的问题使您不清楚如何排列三个对象:图像,hr和段落。看看我下面有什么。如果这不符合您的要求,请重新指定您的要求:



.water-bottle {
	height: 20%;
	width: 20%;
	border: 10px solid #01666d;
	border-radius: 100%;
	padding: 10px;
	margin-left: 15%;
	margin-top: 10%;
	margin-bottom: 20%;
	display: inline-block;
	transform: rotate(25deg);
  vertical-align: middle;
    }

    main p {
	color: #00a4af;
	float: right;
	font-size: 15px;
	max-width: 30%;
	margin-right: 20%;
	margin-top: 15%;
	line-height: 40px;

    }

    hr { /* This makes the lines above the paragraphs */
        border-style: solid;
        border-width: 3px;
        border-color: #01666d;
        max-width: 50px;
        margin-bottom: 5px;
        width: 50px;
        display: inline-block;
        vertical-align: middle;
    }

<main>
    <div class="main-page">

	   <img src="https://via.placeholder.com/150" class="water-bottle">
			<hr>
	   <p>In 2013, Americans ALONE generated about 254 million tons of trash. Could you imagine what the Earth will look like in 20-30 years if this continued year by year?
				Trash pollution is a serious issue. It will continue to be an issue until we step up and be concious of our daily behaviour. Which is why we decided to make a change NOW. Introducing, the 100% ECO friendly water bottle!
	   </p>
	</div>
    </main>

关于html - 将带有hr的段落元素移到图像旁边?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55821842/

10-12 13:03
查看更多