通过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>行来显示海滩内容div下面的<hr>，这并不是很优雅。有没有更好的方法来解决这个问题？ 提前谢谢。

Answer 1

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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-->

＆＃13;

＆＃13;

＆＃13;

您能否用断线标记澄清问题？ 希望这有帮助