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
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;
}
CSS sıvı sütun, sabit kenar boşlukları...
Bootstrap 3.0 - Sabit Sütun Boyutların...
Nasıl bir içeriği görüntülemek için La...
Nasıl cep düzeni Bootstrap 3 sütun sır...
Yeniden Hoş sütun düzeni için vim için...