CSS - içerik genişlik/yükseklik bölgesini geçtiğinde kesinlikle yerleştirilmiş DIV "otomatik genişletmek" Enable garip örnek

Kind parametreleri, ama burada gider:CSS - içerik genişlik/yükseklik bölgesini geçtiğinde kesinlikle yerleştirilmiş DIV "otomatik genişletmek" Enable garip örnek

ben içerik takıldığında genişletmek için kesinlikle konumlandırılmış DIV nasıl alabilirim Bu sınırların ötesine geçer? Burada kodudur:

<html> 
<head> 
    <style> 
     * {margin: 0; padding: 0;} 
     body {white-space: nowrap; text-align: center; color: white; font-size: 2em;} 
     div#container {position: relative; height: 100px; width: 50px;} 

     div#a {height: 50px; width: 25px; background-color: red; position: absolute; top: 0; left: 0;} 
     div#b {height: 50px; width: 25px; background-color: blue; position: absolute; top: 0; right: 0} 
     div#c {height: 50px; width: 25px; background-color: orange; position: absolute; bottom: 0; left: 0;}   
     div#d {height: 50px; width: 25px; background-color: purple; position: absolute; bottom: 0; right: 0;} 

     span#title {position: relative; overflow: visible} 
    </style> 
</head> 
<body> 
    <div id="container"> 
     <div id="a"><span id="title">This is my title</span></div> 
     <div id="b">B</div> 
     <div id="c">C</div> 
     <div id="d">D</div> 
    </div> 
</body>

Yukarıdaki örnekte, DIV içeriği "bir" (nedeniyle genişlik/yükseklik kısıtlamalarına) gizlenir. Bunu "min-height" ve "min-width" olarak ayarlarsak, içerik diğer div'lerin "arkasında" durur, fakat onları hareket ettirmez. Bunu nasıl başarabilirim?

Not: Bunu, DIV'lerin HTML'de sıralandığı düzeni (Wordpress'te bir alt şablon yapmaya çalışıyorum) "yeniden konumlandırmam gerekiyor" diye anlamaya çalışıyorum. Herhangi bir örnek/kaynak büyük beğeni topluyor. Eğer gerekirse yeni/ek/daha büyük içeriğine uygun olarak genişletilecek olan boyutlar için minimum değerler tanımlamak için min-height ve min-width kullanabilir

alkış Sapiensgladio

kaynak

2011-07-13 sapiensgladio

Gerçekten bir şeyleri değiştiren div'lerin sırasını yeniden konumlandırmanız gerekiyorsa ve öğeleri yeniden düzenlemek için jQuery çözümünü kullanarak en iyisi olursunuz .. – BumbleB2na

max-height ve max-width öznitelikleriyle eşleştirebilirsiniz; bu, öğelerin, boyut için gereken en düşük değerden, gerektiği gibi hareket etmesine olanak tanır.

Örnek CSS:

#content { 
    position: absolute; 
    min-height: 5em; 
    max-height: 15em; 
    min-width: 5em; 
    max-width: 15em; 
    border: 1px solid #f90; 
    bottom: 0.5em; 
    right: 0.5em; 
    overflow: auto; 
}

JS Fiddle demo.

yukarıdaki demo #content div için ekstra içerik eklemek için jQuery kullanır, ama bu sadece dinamik gösteri amaçlı olduğunu, jQuery css çalışması için gerekli hiçbir şekilde, değil olduğunu.

kaynak

2011-07-13 22:10:53

+1 Harika Demo! – brenjt

harika bir cevap +1 – BumbleB2na

CSS - içerik genişlik/yükseklik bölgesini geçtiğinde kesinlikle yerleştirilmiş DIV "otomatik genişletmek" Enable garip örnek

cevap

İlgili konular