CSS konteynerleri arasındaki tek fark

CSS kodum aşağıdaki gibidir:

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

Ve aşağıdaki ilgili html kodudur:

<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

Sorunun ne olduğunu biliyorum, ama nasıl çözeceğimi bilmiyorum. Son konteyner elemanı (sağ altta), metnin altında olduğunu düşündüğü için aşağıya yerleştirilir. Bu doğru mu? Bunu nasıl düzelteceğimi bilmiyorum.

Herhangi bir yardım takdir, teşekkür ederim!

0
bunu deneyin jsfiddle.net/2qjtwbbw
katma yazar Yazan W Yusuf, kaynak
Yine bir dikey hizalama: üst sorunu mu var?
katma yazar Hashem Qolami, kaynak
Çok güzel çalışan Yazan - ve evet Haşem, haklısın :)
katma yazar KingDan, kaynak

11 cevap

Divs titiz. Ul ekranını göstererek tavsiye ederim: blok satır içi. Bunun gibi bir şey görebileceğiniz bir web sitesinin sayfa kaynağına bakın. Css'imin çalıştığı yerin bir snippet'i (metin içinde birden fazla resim bulunan bir divim var)

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
katma

Divs titiz. Ul ekranını göstererek tavsiye ederim: blok satır içi. Bunun gibi bir şey görebileceğiniz bir web sitesinin sayfa kaynağına bakın. Css'imin çalıştığı yerin bir snippet'i (metin içinde birden fazla resim bulunan bir divim var)

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
katma

Divs titiz. Ul ekranını göstererek tavsiye ederim: blok satır içi. Bunun gibi bir şey görebileceğiniz bir web sitesinin sayfa kaynağına bakın. Css'imin çalıştığı yerin bir snippet'i (metin içinde birden fazla resim bulunan bir divim var)

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
katma

Bu tür kapları konumlandırmak için bence, dava açmanıza gerek yok: göreceli olarak daha büyük bir contaner/sarmalayıcı varsa, portreleri saran ve kenar boşlukları ile konumlandırılan. Bu durumda kabınızı yerleştirmek için marj kullanabilirsiniz. Ayrıca, onları biraz daha iyi stillendirmek ve görüntülemesini sağlamak istiyorsanız, resimler için şekil etiketi kullanmak iyi bir fikirdir: metnin görüntünün altında olmasını istiyorsanız engelleyin.

0
katma

Bu tür kapları konumlandırmak için bence, dava açmanıza gerek yok: göreceli olarak daha büyük bir contaner/sarmalayıcı varsa, portreleri saran ve kenar boşlukları ile konumlandırılan. Bu durumda kabınızı yerleştirmek için marj kullanabilirsiniz. Ayrıca, onları biraz daha iyi stillendirmek ve görüntülemesini sağlamak istiyorsanız, resimler için şekil etiketi kullanmak iyi bir fikirdir: metnin görüntünün altında olmasını istiyorsanız engelleyin.

0
katma

Bu tür kapları konumlandırmak için bence, dava açmanıza gerek yok: göreceli olarak daha büyük bir contaner/sarmalayıcı varsa, portreleri saran ve kenar boşlukları ile konumlandırılan. Bu durumda kabınızı yerleştirmek için marj kullanabilirsiniz. Ayrıca, onları biraz daha iyi stillendirmek ve görüntülemesini sağlamak istiyorsanız, resimler için şekil etiketi kullanmak iyi bir fikirdir: metnin görüntünün altında olmasını istiyorsanız engelleyin.

0
katma

Bu tür kapları konumlandırmak için bence, dava açmanıza gerek yok: göreceli olarak daha büyük bir contaner/sarmalayıcı varsa, portreleri saran ve kenar boşlukları ile konumlandırılan. Bu durumda kabınızı yerleştirmek için marj kullanabilirsiniz. Ayrıca, onları biraz daha iyi stillendirmek ve görüntülemesini sağlamak istiyorsanız, resimler için şekil etiketi kullanmak iyi bir fikirdir: metnin görüntünün altında olmasını istiyorsanız engelleyin.

0
katma

Emin değilim, ancak basit bir çözüm tablo olarak görüntülemek olacaktır.

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

Emin değilim, ancak basit bir çözüm tablo olarak görüntülemek olacaktır.

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

Emin değilim, ancak basit bir çözüm tablo olarak görüntülemek olacaktır.

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

Emin değilim, ancak basit bir çözüm tablo olarak görüntülemek olacaktır.

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