Vreemde kloof tussen CSS-containers

het volgende is mijn CSS-code:

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

.portrait
{
        width: 400px;
        position: relative;
        display: inline-block;
        background-color: #4E5555;
}

.portrait img
{
        width: 150px;
        float: left;
        padding-right: 20px;
}

.portrait h4
{
        text-align: left;
        margin: 0px 0px 0px 0px;
        color: #fff;
}
</div> </div>

En het volgende is mijn relevante html-code:

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

<div class="portrait">
        
        

Julian Aboui

</div>
                                                        
<div class="portrait">
        
        

Aaron Alter

</div>
                                                        
<div class="portrait">
        
        

Pia Abrahams

        

STUFF STUFF STUFF STUFF STUFF STUFF STUFF STUFF STUFF STUFF STUFF

</div>

<div class="portrait">
        
        

Shailen Asnani

</div>
</div> </div>

My output is the following: http://i.imgur.com/YRkJvmn.png

Ik denk dat ik weet wat het probleem is, maar ik weet niet zeker hoe ik het moet repareren. Het laatste containerelement (rechtsonder) wordt verder naar beneden geplaatst omdat het denkt dat het onder de tekst staat. Is dat correct? Ik weet niet zeker hoe ik dat moet oplossen.

Alle hulp wordt gewaardeerd, dank u!

0
probeer deze jsfiddle.net/2qjtwbbw
toegevoegd de auteur Yazan W Yusuf, de bron
Nog een ander probleem met vertical-align: top ?
toegevoegd de auteur Hashem Qolami, de bron
Yazan, dat werkte prachtig - en ja Hashem, je hebt gelijk ook :)
toegevoegd de auteur KingDan, de bron

11 antwoord

Divs zijn kieskeurig. Ik zou aanraden om ul met display te gebruiken: blokkeer inline. Kijk maar naar de pagina-bron van een website waar je zoiets kunt zien werken. Een fragment uit mijn CSS waar het werkt (ik heb een div in de li met tekst en meerdere afbeeldingen)

div.list_holder {margin-bottom: 10px; clear: both; font-style:normal;}
ul.user_list    {display:block; margin: 0px auto;}
li.list_item    {list-style: outside none none; margin-right: -100%;
                 position: relative; padding: 0px; clear: none;
                 margin-bottom: 10px !important;
                 border: 2px solid !important; min-height: 325px;
                 max-width: 206px; float: left; margin-right: -100%;
                 width: 23.5%;border-radius: 2px;}
0
toegevoegd

Divs zijn kieskeurig. Ik zou aanraden om ul met display te gebruiken: blokkeer inline. Kijk maar naar de pagina-bron van een website waar je zoiets kunt zien werken. Een fragment uit mijn CSS waar het werkt (ik heb een div in de li met tekst en meerdere afbeeldingen)

div.list_holder {margin-bottom: 10px; clear: both; font-style:normal;}
ul.user_list    {display:block; margin: 0px auto;}
li.list_item    {list-style: outside none none; margin-right: -100%;
                 position: relative; padding: 0px; clear: none;
                 margin-bottom: 10px !important;
                 border: 2px solid !important; min-height: 325px;
                 max-width: 206px; float: left; margin-right: -100%;
                 width: 23.5%;border-radius: 2px;}
0
toegevoegd

Divs zijn kieskeurig. Ik zou aanraden om ul met display te gebruiken: blokkeer inline. Kijk maar naar de pagina-bron van een website waar je zoiets kunt zien werken. Een fragment uit mijn CSS waar het werkt (ik heb een div in de li met tekst en meerdere afbeeldingen)

div.list_holder {margin-bottom: 10px; clear: both; font-style:normal;}
ul.user_list    {display:block; margin: 0px auto;}
li.list_item    {list-style: outside none none; margin-right: -100%;
                 position: relative; padding: 0px; clear: none;
                 margin-bottom: 10px !important;
                 border: 2px solid !important; min-height: 325px;
                 max-width: 206px; float: left; margin-right: -100%;
                 width: 23.5%;border-radius: 2px;}
0
toegevoegd

Naar mijn mening voor het plaatsen van dit soort containers hoef je geen actie te ondernemen: relatief als je een grotere contaner/wrapper hebt, die de portretten omsluit en wordt gepositioneerd via marges. In dat geval kunt u marge gebruiken om uw container te positioneren. Ook is het een goed idee om de figuurcode voor de afbeeldingen te gebruiken als u ze iets beter wilt opmaken en weergeeft: blokkeren als u wilt dat de tekst onder de afbeelding valt.

0
toegevoegd

Naar mijn mening voor het plaatsen van dit soort containers hoef je geen actie te ondernemen: relatief als je een grotere contaner/wrapper hebt, die de portretten omsluit en wordt gepositioneerd via marges. In dat geval kunt u marge gebruiken om uw container te positioneren. Ook is het een goed idee om de figuurcode voor de afbeeldingen te gebruiken als u ze iets beter wilt opmaken en weergeeft: blokkeren als u wilt dat de tekst onder de afbeelding valt.

0
toegevoegd

Naar mijn mening voor het plaatsen van dit soort containers hoef je geen actie te ondernemen: relatief als je een grotere contaner/wrapper hebt, die de portretten omsluit en wordt gepositioneerd via marges. In dat geval kunt u marge gebruiken om uw container te positioneren. Ook is het een goed idee om de figuurcode voor de afbeeldingen te gebruiken als u ze iets beter wilt opmaken en weergeeft: blokkeren als u wilt dat de tekst onder de afbeelding valt.

0
toegevoegd

Naar mijn mening voor het plaatsen van dit soort containers hoef je geen actie te ondernemen: relatief als je een grotere contaner/wrapper hebt, die de portretten omsluit en wordt gepositioneerd via marges. In dat geval kunt u marge gebruiken om uw container te positioneren. Ook is het een goed idee om de figuurcode voor de afbeeldingen te gebruiken als u ze iets beter wilt opmaken en weergeeft: blokkeren als u wilt dat de tekst onder de afbeelding valt.

0
toegevoegd

Niet zeker, maar een eenvoudige oplossing zou zijn om het als een tabel weer te geven

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

.row {
    display:table-row;
}
.portrait
{
        width: 400px;
        position: relative;
        display: table-cell;
        background-color: #4E5555;
}

.portrait img
{
        width: 150px;
        float: left;
        padding-right: 20px;
}

.portrait h4
{
        text-align: left;
        margin: 0px 0px 0px 0px;
        color: #fff;
}
</div> </div>

And wrap the two rows you want in <div class='row'>

0
toegevoegd

Niet zeker, maar een eenvoudige oplossing zou zijn om het als een tabel weer te geven

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

.row {
    display:table-row;
}
.portrait
{
        width: 400px;
        position: relative;
        display: table-cell;
        background-color: #4E5555;
}

.portrait img
{
        width: 150px;
        float: left;
        padding-right: 20px;
}

.portrait h4
{
        text-align: left;
        margin: 0px 0px 0px 0px;
        color: #fff;
}
</div> </div>

And wrap the two rows you want in <div class='row'>

0
toegevoegd

Niet zeker, maar een eenvoudige oplossing zou zijn om het als een tabel weer te geven

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

.row {
    display:table-row;
}
.portrait
{
        width: 400px;
        position: relative;
        display: table-cell;
        background-color: #4E5555;
}

.portrait img
{
        width: 150px;
        float: left;
        padding-right: 20px;
}

.portrait h4
{
        text-align: left;
        margin: 0px 0px 0px 0px;
        color: #fff;
}
</div> </div>

And wrap the two rows you want in <div class='row'>

0
toegevoegd

Niet zeker, maar een eenvoudige oplossing zou zijn om het als een tabel weer te geven

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

.row {
    display:table-row;
}
.portrait
{
        width: 400px;
        position: relative;
        display: table-cell;
        background-color: #4E5555;
}

.portrait img
{
        width: 150px;
        float: left;
        padding-right: 20px;
}

.portrait h4
{
        text-align: left;
        margin: 0px 0px 0px 0px;
        color: #fff;
}
</div> </div>

And wrap the two rows you want in <div class='row'>

0
toegevoegd