0
私はちょうどHTMLとCSSの学習を始めました。水平のスペースを入れて両方の行を分ける方法を考え出し、位置ずれ/サイズの問題を修正するのに問題があります。両方の行が現在一緒に接続されています.を削除すると、位置ずれは修正されますが、行は引き続き一緒になります。2 divの行を分けることができません
誰でもお手伝いできますか？
HTML：
<div id="featuredcities">
<div class="col-sm-3">
<img id="image" src="images/singapore.jpg" alt="singapore">
<a href="#"><p id="text">Singapore</p></a>
<p id="summarytext">Amazing culinary experience and <br>efficient business ecosystem in this <br>tiny cosmopolitan country.</p>
</div>
<div class="col-sm-3">
<img id="image" src="images/bangkok.jpg" alt="bangkok">
<a href="#"><p id="text">Bangkok</p></a>
<p id="summarytext">A bustling neon-lit city that combines tradition and modernity.</p>
</div>
<div class="col-sm-3">
<img id="image" src="images/shanghai.jpg" alt="shanghai">
<a href="#"><p id="text">Shanghai</p></a>
<p id="summarytext">Blend of East meets West <br>in this high energy metropolis.</p>
</div>
<div class="col-sm-3">
<img id="image" src="images/hcmc.jpg" alt="ho chi minh city">
<a href="#"><p id="text">HCMC</p></a>
<p id="summarytext">The "Paris of Asia", Ho Chi Minh City is <br>as much historical as it is modern.</p>
</div>
</div><!--End of 1st div row-->
<!--2nd div row-->
<div class="row" style="padding-top: 50px">
<div class="col-sm-3">
<img id="image" src="images/seoul.jpg" alt="seoul">
<a href="#"><p id="text">Seoul</p></a>
<p id="summarytext">Famous for pop culture, <br>vibrant shopping and <br>historical palaces.</p>
</div>
<div class="col-sm-3">
<img id="image" src="images/bangkok.jpg" alt="bangkok">
<a href="#"><p id="text">Bangkok</p></a>
<p id="summarytext">A bustling neon-lit city that combines tradition and modernity.</p>
</div>
<div class="col-sm-3">
<img id="image" src="images/shanghai.jpg" alt="shanghai">
<a href="#"><p id="text">Shanghai</p></a>
<p id="summarytext">Blend of East meets West <br>in this high energy metropolis.</p>
</div>
<div class="col-sm-3">
<img id="image" src="images/hcmc.jpg" alt="ho chi minh city">
<a href="#"><p id="text">HCMC</p></a>
<p id="summarytext">The "Paris of Asia", Ho Chi Minh City is <br>as much historical as it is modern.</p>
</div>
</div><!--End of 1st div row-->
</div><!--End of Community-->
</section>
CSS：
#images .col-md-3 {
height: 570px;
overflow: hidden;
}
最初の「行」（#featuredcities）は '.row'クラスのdivではありません。そこから始めたいと思います。 –
また、IDは一意である必要があります...複数回使用することはできません....すべての画像は同じIDを持ちます。 **あなたのコードを検証してください！** –