通过 CSS 向右移动 div 标签

Question

我有 3 个 div 标签，我在左侧对齐并向左浮动。问题是上面还有 width: 80rem; 的另一个内容，我想将它们居中。我尝试了很多组合，但我无法让第一张图片与上面的对象对齐。

CSS

.beachcontent{
background-color: #FAFCE8;
margin: auto;
margin-bottom: 5px;
border: 0.1rem solid black;
padding: 0.2rem;
width: 26.6rem;
text-align: center;
margin-left: 2.5px;
margin-right: 2.5px;
float: left;
}

HTML

<div class="beachcontent">  <!--starting div beachcontent-->
<h4>Sardinia</h4>
<a href="sardinia.html"><img src="images/sardinia.jpg" width="330" height="220" alt="Sardinia"></a>
</div>                      <!--ending div beachcontent-->
<div class="beachcontent">  <!--starting div beachcontent-->
<h4>Sicily</h4>
<a href="sicily.html"><img src="images/sicily.jpg" width="330" height="220" alt="Sicily"></a>
</div>                      <!--ending div beachcontent-->
<div class="beachcontent">  <!--starting div beachcontent-->
<h4>Elba</h4>
<a href="elba.html"><img src="images/elba.jpg" width="330" height="220" alt="Elba"></a>
</div>                      <!--ending div beachcontent-->
</main>
<!--several br lines to display hr below beachcontent divs-->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!--TO BE FIXED IF POSSIBLE-->

另一个小问题是我必须使用几行<br> 来显示<hr> beachcontent divs 下面，这不是很优雅。有没有更好的方法来解决这个问题？提前致谢。

Answer 1

我想我找到了解决您问题的方法。我将您所有的 div 分组到另一个 div 中，并将其宽度设置为 82rem 和一个自动边距。您必须自定义宽度以适合您的设计。试试下面的代码：

.beachcontent{
background-color: #FAFCE8;
margin-bottom: 5px;
border: 0.1rem solid black;
padding: 0.2rem;
width: 26.6rem;
text-align: center;
display:inline-block;
}
#middle{
  width: 82rem;
  margin:auto;
}

<div id="middle">
<div class="beachcontent">  <!--starting div beachcontent-->
<h4>Sardinia</h4>
<a href="sardinia.html"><img src="images/sardinia.jpg" width="330" height="220" alt="Sardinia"></a>
</div>                      <!--ending div beachcontent-->
<div class="beachcontent">  <!--starting div beachcontent-->
<h4>Sicily</h4>
<a href="sicily.html"><img src="images/sicily.jpg" width="330" height="220" alt="Sicily"></a>
</div>                      <!--ending div beachcontent-->
<div class="beachcontent">  <!--starting div beachcontent-->
<h4>Elba</h4>
<a href="elba.html"><img src="images/elba.jpg" width="330" height="220" alt="Elba"></a>
</div><!--ending div beachcontent-->
</div>
</main>
<!--several br lines to display hr below beachcontent divs-->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!--TO BE FIXED IF POSSIBLE-->

你能澄清一下你的断线标签的问题吗？希望这有帮助

通过 CSS 向右移动 div 标签

move div tag to the right through CSS

html

css

tags

css-float