SORU
4 Mart 2011, Cuma


2 sütun div düzeni: sabit genişlik, sol sıvı ile sağ sütun

Benim gereksinimi basittir:Doğru sabit bir boyuta sahip olduğu 2 sütun. Ne yazık ki çalışan bir çözüm bulamadım, ne Google ne de stackoverflow üzerinde. Her çözüm orada anlattığım benim kendi bağlamında uygulamak başarısız olur. Geçerli çözüm

div.container {
    position: fixed;
    float: left;
    top: 100px;
    width: 100%;
    clear: both;
}

#content {
    margin-right: 265px;
}

#right {
    float: right;
    width: 225px;
    margin-left: -225px;
}

#right, #content {
    height: 1%; /* fixed for IE, although doesn't seem to work */
    padding: 20px;
}
<div class="container">
    <div id="content">
        fooburg content
    </div>
    <div id="right">
        test right
    </div>
</div>

Yukarıdaki kod ile şu olsun:

|----------------------- -------|
| fooburg content  |            |
|-------------------------------|
|                  | test right | 
|----------------------- -------|

Tavsiye lütfen. Çok teşekkürler!

CEVAP
4 Mart 2011, Cuma


Sol sütunda kaydır çıkarın.

HTML kodu, sağ sütun sol daha önce gelmesi gerekiyor.

Eğer doğru bir şamandıra (genişlik) varsa, ve eğer sol sütun genişliği ve şamandıra yok eğer değil esnek olacak :)

Ayrıca hem iç divs onu çevreleyen dış div overflow: hidden ve bazı yükseklik (otomatik olabilir) uygulayın.

Son olarak, en sol sütun ekleyin width: auto overflow: hidden, Bu sol sütun bağımsız doğru bir (örneğin, yeniden boyutlandırılan bir tarayıcı penceresi ve sağ sütun dokundu sol olmadan bu özellikleri, sol sütunda ki run etrafında doğru, bu özelliklerini koruyor uzay).

Örneğin HTML:

<div class="container">
    <div class="right">
        right content fixed width
    </div>
    <div class="left">
        left content flexible width
    </div>
</div>

CSS:

.container {
   height: auto;
   overflow: hidden;
}

.right {
    width: 180px;
    float: right;
    background: #aafed6;
}

.left {
    float: none; /* not needed, just for clarification */
    background: #e8f6fe;
    /* the next props are meant to keep this block independent from the other floated one */
    width: auto;
    overflow: hidden;
}​​

Örnek: http://jsfiddle.net/jackJoe/fxWg7/

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

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • BSA

    BSA

    9 NİSAN 2012
  • Defence Videos

    Defence Vide

    13 Mayıs 2013
  • HER0R

    HER0R

    16 Aralık 2007