Question

我目前对此问题感到困惑。我想在图片的我的段落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>

Answer 1

为了在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>

Answer 2

希望可以尝试一下。

<html> 
<head>
	<title>sample</title>
	<style type="text/css">
		.img-section {
			width: 100%;

		}
		.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-top: 15%;
			margin-right: 20%;
			line-height: 40px;
		}
		hr { 
			/* This makes the lines above the paragraphs */
		    border-style: solid;
		    border-width: 3px;
		    border-color: #01666d;
		    max-width: 50px;
		    width: 50px;
		    display: inline-block;
        	vertical-align: middle;
		}
		
	</style>
</head>
<body>
    <main>
		<div class="main-page"> 
			<img src="images/Water/waterbottle.png" 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>
</body>
</html>

Answer 3

您的问题不是很清楚。但我仍然尝试给出答案。 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);
}

.text {
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: 100%;
    margin-bottom: 5px;
}

	<main>
		<div class="main-page">
		   <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSxjXlrA2C9ecV_2gNhFy4hD_PpQkNmNJSkzNyh87GVw434uFopEQ" class="water-bottle">
		   <div class="text">
		   <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>
		</div>
	</main>

将段落元素移动到图片旁边吗？

3 个答案: