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

  • Elefant Traks

    Elefant Trak

    5 HAZİRAN 2007
  • MrDevin521

    MrDevin521

    18 Temmuz 2010
  • Rugiagialia

    Rugiagialia

    1 Ocak 2008