Nasıl ınline-block element bir satırın kalan dolgu yapmak için?

SORU

4 NİSAN 2011, PAZARTESİ

Nasıl ınline-block element bir satırın kalan dolgu yapmak için?

Bir tablo kullanmak yerine böyle bir şey mümkün ve iki ınline-block (ya da her neyse), CSS, DİV etiketlerini kullanıyor?

Tablo sürüm bu (sınırlar görün diye ekledi)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<table style="width:100%;">
<tr>
<td style="border:1px solid black;width:100px;height:10px;"></td>
<td style="border:1px solid black;height:10px;"></td>
</tr>
</table>
</body>
</html>

Bir ile sol sütun üretirGENİŞLİĞİ SABİT(yüzde bir genişlik değil) ve sağ sütun doldurmak için genişlerKALAN BOŞLUKhat üzerinde. Oldukça basit, değil mi? Hiçbir şey olduğundan ayrıca, "yüzen", düzgün yüksekliğini kapsayacak şekilde genişletiyor üst kabın yüksekliği içeriği.

---- RANT BAŞLAR
"Açık" ve" multi-sütun uygulamaları sabit genişlikli yan sütun düzenleri, ve onlar emmek ve karmaşık oluyorlar. kase "kutsal düzeltme gördüm Onlar tersten unsurları, kullandıkları yüzde genişlikleri veya kullanmak yüzer, negatif kenar boşlukları ve ilişki arasında bir "sol", "sağ" ve "boşluğu" nitelikleridir karmaşık. Ayrıca, düzenleri kenarlıklar, dolgular, ya da boşlukları bile tek bir pikseli ekleyerek bütün planları kırmak, ve tüm sütunlar sonraki satıra kaydırma gönderecek, böylece alt-piksel hassas. Örneğin, yuvarlama hataları eğer basit bir şey yapmak için çalışırsanız bile bir sorun, % her birinin genişliği ayarlanmış bir çizgi üzerinde, 4 element koymak gibi.
--RANT-- END

Kullanarak denedim "ınline-block" ve "white-space:nowrap;" ama sorun sadece 2 element doldurmak için alamıyorumkalansatırda boşluk. Bir şey için genişliği gibi ": 100%genişlik(LeftColumWidth)px" ama bir genişlikte bir hesaplama gerçekleştirmek bazı durumlarda çalışacak özelliği gerçekten desteklenmiyor. ayarı

CEVAP

7 NİSAN 2011, PERŞEMBE

Bkz:http://jsfiddle.net/qx32C/36/

<div class="lineContainer">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

.lineContainer {
    overflow: hidden; /* clear the float */
    border: 1px solid #000
}
.lineContainer div {
    height: 10px
} 
.left {
    width: 100px;
    float: left;
    border-right: 1px solid #000
}
.right {
    overflow: hidden;
    background: #ccc
}

Why did I replace margin-left: 100px with overflow: hidden on .right?

Bunu Paylaş: