SORU
13 AĞUSTOS 2010, Cuma


CSS display:tablo-satır genişliği %100 olarak ayarlandığında genişletmek değil

Biraz sorun yaşıyorum. FireFox 3.6 kullanarak ve aşağıdaki DOM yapıya sahip değilim:

<div class="view-row">
    <div class="view-type">Type</div>
    <div class="view-name">Name</div>                
</div>

Ve aşağıdaki CSS:

.view-row {
width:100%;
display:table-row;
}

.view-name {
display: table-cell;
float:right;
}

.view-type {
display: table-cell;
}

Kapalı display:table-row alırsam düzgün, view-row 100% genişlik gösteren görünecektir. Eğer geri koyarsam aşağı küçülür. Bu JS Bin katlandım:

http://jsbin.com/ifiyo

Neler oluyor?

CEVAP
13 AĞUSTOS 2010, Cuma


Eğer display:table-row vb. kullanıyorsanız o zaman içeren bir tablo içeren uygun işaretleme, gerekir. O olmadan orijinal soru temelde biçimlendirme kötü: eşdeğer sağlar

<tr style="width:100%">
    <td>Type</td>
    <td style="float:right">Name</td>
</tr>

Nerede yukarıdaki tabloda? Bir yerden bir satır (tr, *, tbody, *thead11 ya vb bulunmalıdır.) olabilir mi

Bunun yerine, içeren öğe display:table, 100% genişliği koymak ile dış bir öğe ekleyin. Hücre içinde iki otomatik olarak 50/50 gidip ikinci bir hücre metin sağa hizalanır. Tablo unsurları ile floats unut. Bu kadar çok baş ağrısı neden olur.

işaretleme:

<div class="view-table">
    <div class="view-row">
        <div class="view-type">Type</div>
        <div class="view-name">Name</div>                
    </div>
</div>

CSS:

.view-table
{
    display:table;
    width:100%;
}
.view-row,
{
    display:table-row;
}
.view-row > div
{
    display: table-cell;
}
.view-name 
{
    text-align:right;
}

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Derek Banas

    Derek Banas

    12 AĞUSTOS 2008
  • Excel Video Tutorials

    Excel Video

    6 Aralık 2012
  • FILIPeeeK

    FILIPeeeK

    22 Mayıs 2006