div dolgu, kenar boşluğu?

Question

Ben bazı temel CSS özellikleri ile sıkışmış bir iPhone geliştirici değilim;) Böyle bir şey göstermek istiyorum:

Bu edilir Elimde ne:

<div class="cell"> 
    <div class="cell_3x3_top"> 
     <div class="cell_3x3_type rounded_left">type</div> <!--UPDATED:2010/09/29--> 
     <div class="cell_3x3_title rounded_right">title</div><!--UPDATED:2010/09/29--> 
    </div> 
    <div class="cell_3x3_content rounded_left rounded_right">content</div><!--UPDATED:2010/09/29--> 
</div> 

ve css:

div.cell_3x3_top{ 
    height:20%; 
    margin: 0 0 0 0; 
    padding: 0 0 0 0; 
    border: none; 
    margin-bottom: 1px; /*to compensate space between top and content*/ 
    text-align: center; 
    vertical-align: middle; 


} 
div.cell_3x3_type{ 
    width:20%; 
    float:left; 
    background-color: inherit; 
    margin-right: -2px; /*UPDATED:2010/09/29*/ 
} 
div.cell_3x3_title{ 
    width:80%; 
    float:left; 
    background-color: inherit; 
    margin: 0 0 0 0; /* maybe not neccesary*/ 
    padding: 0 0 0 0; /*maybe not neccesary*/ 
    margin-left: -1px; /*UPDATED:2010/09/29 */ 

} 
div.cell_3x3_content{ 
    height:80%; 
    background-color: inherit; 
} 

Ancak içeriğimi yukarıdaki kodla oluşturduğumda title div, çok büyük görünüyor ve type divasının altında görünüyor Neden bu? type div% 20 genişliktedir, title% 80 genişliğinde olduğundan tam olarak% 100 olmalıdır. Burada herhangi bir marj veya başka bir metrik var mı? title div marjini kullanarak sola hareket ettirmeye çalıştım ama yine de buggy. Resim gibi bir şey elde etmenin doğru yolu nedir acaba? (Tam olarak değil title div olması gerekenden daha biraz daha kısadır yakından bakarsan. Onun sağ sınır content div ile uyumlu olmadığını bakın. Çünkü) önceden

teşekkür ederiz.

DÜZENLEME: 2010/09/28

Bu benim ulaşmak istediğim aslında:

ve bu ne var: Yukarıdaki kod

(biraz güncellenmiş Eğer sınırsız div olmasaydım işe yarayacaktı. kenarlık genişliği ihtiyacım olanı 1px olduğundan type div genişliği 20 ila% -2px (sol sınır + sağ border = 2px) ve title div 80% ayarlamaktır (benzemektedir .rounded_right) -2px

.rounded_left{ 
    border-top-left-radius: 4px 4px; 
    border-bottom-left-radius: 4px 4px; 

    border-color:gray; 
    border-width: 1px; 
    border-style:solid; 
} 

Bu, clear:both özelliği ile ilgili değil I inanıyorum. content divim iyi bir başlangıç ​​olduğundan beri denedim ve hiç bir etkisi olmadı.

Kısaca: Sınırı da dahil olmak üzere bir div'u tam olarak% 20 genişlikte söyleyebilmeyi nasıl sağlayabilirim?

Ignacio

CEVAP:

Ben türü ve başlık etrafında sarıcı div sırasıyla sorunu çözer fark etti. Yani cevabım biraz şu şekildedir:

<td class="cell"> 
<div class="cell_3x3_top bordered"> 
<div class="cell_3x3_type_container"><div class="cell_3x3_type rounded_left full_height">6</div></div> 
<div class="cell_3x3_title_container"><div class="cell_3x3_title rounded_right full_height">title</div></div>                </div> 
<div class="cell_3x3_content rounded_left rounded_right">content</div> 
</td> 

Ben% 20 ve iç div kaplarda ve sınırları içinde% 80 olarak ayarlayın.

Answer 1

Takas bölümü eksik. Kayan öğeler beklediğiniz gibi .cell_3x3_type div genişletmez.Bunun yerine bu deneyin:

<div class="cell"> 
    <div class="cell_3x3_top"> 
     <div class="cell_3x3_type">type</div> 
     <div class="cell_3x3_title">title</div> 
     <div class="cell_3x3_clear"></div> 
    </div> 
    <div class="cell_3x3_content">content</div> 
</div> 

CSS:

div.cell_3x3_clear { 
    clear: both; 
} 

gerisi aynı kalır.

DÜZENLEME: açık mülkiyet ne olduğunun net küçük bir açıklama
:

<div id="container" style="border: 1px solid green;"> 
    <div style="float: left; height: 30px; width: 30px; border: 1px solid red;"></div> 
    <div style="float: left; height: 20px; width: 20px; border: 1px solid blue;"></div> 
</div> 

http://fii.cz/vksyr

: içeren bir kabı div düşünün sadece (netlik için satır içi CSS kullanarak) böyle elemanları, süzülüyor

Kapsayıcının div yüksekliğidir, çünkü kayan öğeler belge akışından çıkarılır ve artık konteynırlarının yüksekliğini etkilemez. Bir öğeyi clear: both mülkiyet tüm yüzer, yani eleman kendisinden önce tüm kayan elemanlar altına yerleştirilirse emin olur "temizler":

<div style="float: left; height: 30px; width: 30px; border: 1px solid red;"></div> 
<div style="float: left; height: 20px; width: 20px; border: 1px solid blue;"></div> 
<div style="clear: both; height: 10px; width: 50px; border: 1px solid black;">Cleared</div> 

http://fii.cz/tjdqwac

iki Yukarıdaki örnekler birleştirirseniz yapabilirsiniz içinde yüksek yüzen elemanın yüksekliğine eşit olan bir yüksekliğe sahip olmasını kapsayıcı div zorlamak:

<div id="container" style="border: 2px solid green;"> 
    <div style="float: left; height: 30px; width: 30px; border: 1px solid red;"></div> 
    <div style="float: left; height: 20px; width: 20px; border: 1px solid blue;"></div> 
    <div style="clear: both; height: 0px; border: 1px solid black;"></div> 
</div> 

http://fii.cz/nmpshuh