2 Div-Zeilen können nicht getrennt werden

Question

Ich habe gerade mit dem Erlernen von HTML und CSS begonnen, und es fällt mir schwer, herauszufinden, wie man einen horizontalen Abstand zwischen beiden Zeilen einfügt und das Fehlausrichtungs/Größenproblem behebt. Beide Zeilen sind derzeit zusammengefügt, und wenn ich <div class="row" style="padding-top: 50px"> entferne, ist die Fehlausrichtung behoben, aber die Zeilen sind noch zusammen.

Kann mir jemand helfen?

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

Answer 1

Sie haben diesen HTML-Code für Ihre erste div

<div id="featuredcities">

die Klasse row es hinzufügen.

<div class="row" id="featuredcities">

Answer 2

Sie entweder von padding-top zu margin-top ändern könnte, oder Sie können auch in einem
Tag hinzufügen zwischen den beiden divs.

Answer 3

<div class="row" 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"> <!-- padding top is all you need --> 

    <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 2st div row--> 

immer versuchen, Ihren Code sauber zu halten .. Ich empfehle Ihnen, die Sie wirklich gutes System Bootstrap-Raster Bootstrap-grid

bearbeiten studieren: Ihre Bilder ID ist "Bild", und in der css du nennst "#images" ...?