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

別の小さな問題は、私は本当にエレガントではありませんbeachcontentのdivを、以下の<hr>を表示するには、いくつかの<br>ラインを使用する必要があることです。これを修正するより良い方法はありますか？ ありがとうございます。

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

あなたの破断線タグの問題を明確にしてくださいすることができ： 以下のコードを試してみてください？ これは役に立ちます。