Verschieben div Tag nach rechts durch CSS

Question

Ich habe 3 Div-Tag, dass ich auf der linken Seite ausgerichtet und schweben links. Das Problem ist oben gibt es einen anderen Inhalt von width: 80rem; und ich möchte sie irgendwie zentrieren. Ich habe so viele Kombinationen ausprobiert, aber ich bin nicht in der Lage, das erste Bild auf das Objekt oben ausgerichtet zu starten.

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

ein weiteres kleines Problem ist, dass ich mehr <br> Linien verwenden <hr> unter beachcontent divs angezeigt werden, die nicht wirklich elegant ist. Gibt es einen besseren Weg, das zu beheben? Vielen Dank im Voraus.

Answer 1

Ich denke, dass ich eine Lösung für Ihr Problem gefunden. Ich habe alle Divs in einem anderen Div gruppiert und eine Breite von 82rem und einen Auto Margin angegeben. Sie müssen die Breite an Ihr Design anpassen. den Code Versuchen Sie unter:

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

Können Sie bitte das Problem mit dem Bruchlinie Tag klären? Hoffe, das hilft