Bir şekilde sütun sayısını en geniş öğeyi bağlı olduğu birden fazla sütun öğeleri hizalamak için var mı? Öğenin yükseklik ve kap genişliği hem sabittir, ancak maddenin genişliği dinamik.

CSS-sadece bir yol için aşağıdaki davranış elde etmek için arıyorum:

(Üst kapsayıcı 300px genişliğinde olduğunu varsayalım.)

• Geniş bir öğe 150px, tek bir sütun daha geniş olsa
• 100px ve 150px, iki sütun arasında geniş bir öğe varsa
• Geniş bir öğe ise 100px, kullanın, üç sütun daha az
• ...
• Eğer geniş bir öğe konteyner genişliği / N daha az ise, N sütunları kullanın

Bu davranış için olası bir yolu display:inline-block kullanma ve konteyner JavaScript kullanarak geniş bir elemanın genişliği width özelliğini ayarlayarak olabilir.

Örneğin this JSFiddle bkz

Ancak, aynı zamanda bunu CSS-sadece bir yolu olmalı diye düşünüyorum. Mümkün mü?

Eğer değilse, belki de sabit bir genişlikte bir kap içinde sütunları dinamik olarak boy öğeleri yakalamaya / dağıtma CSS-sadece zarif bir yolu var mı?

...Ben CSS-sadece bir yol için aşağıdaki ulaşmak isteyen Eğer geniş bir öğe daha geniş olsa...... davranış

...Ben de CSS-sadece bir yol olması gerektiğini düşünüyorum bu yaptığın...

Çocuğunuzun değişen genişlikleri div s ve saf CSS tek bir çözüm dolayısıyla algılayamaz CSS As indicated by @Paulie-Ddeğil, hiç yok.

Bu tüm elemanların genişlikleri, o max dönmek isteyen ve sonra bu genişlik sütunlara öğeleri dağıtmak için kullanın. Bu hesaplama CSS ötesinde. Bunu yapmak için Javascript gerekir.

Değil, şık bir CSS-sadece dağıtmanın bir yolu var /belki yakalamaya dinamik boyutlu öğeleri bir konteyner sütunları için sabit bir genişlik?

İki bölüm halinde anlatacağım:

1, CSS bölüm:

İçerik sütun içinde olmak istiyoruz dediğimiz zaman, sadece soldan sağa akış sarma yerine yukarıdan aşağıya bir akış anlamına gelir. Bunun için CSS Sütun gerektirir.

Hile column-count / column-width auto belirtmektir. Bu sütunları otomatik olarak üst genişliği içinde gerekli sayıya içeriği dağıtmak.

Yukarıdaki açıklamada temel bir hata yaptım (dolayısıyla başka bir düzenleme). specs here başı olarak algoritma şöyle diyor:

(01) if ((column-width = auto) and (column-count = auto)) then
(02)      exit; /* not a multicol element */ 

Bu yanlış daha önce nerede olduğumu. column-count column-width 21 ** olarak ayarlandığında, o zaman kabul edilirdeğil multicol bir unsur. Bu özelliklerinden biri de otomatik olmayan bir değere ayarlandığında, daha sonra diğer özelliği bu kişi tarafından belirlenir.

above ref:

eğer column-count ayarlanmışsa auto, sonra sütun sayısı diğer özellikler (oto dışı bir değer varsa, örneğin, column-width) tarafından belirlenecektir ve eğer column-width ayarlanmışsa auto, sonra sütun genişliğini diğer özellikler (oto dışı bir değer varsa, örneğin, column-count) tarafından belirlenecektir

Örnek column-width sabit genişlikli için bir dizi olurdu, ki 120px (part 2 biraz sonra ilgileneceğiz):

.container { -webkit-columns: auto 120px; columns: auto 120px; }

Bu kabın içeriği uyum neden olursütun sayısı kadarkendi genişliği içinde 120px sütun genişliği gibi. Eğer konteyner genişliğini artırmak, daha fazla sütun olacak. Kapsayıcı genişliğini azaltmak, daha az sütun sonunda çok fazla alanı yok, tek bir sütun için çöken alacak.

Aşağıda parçasında tam bir örnek

Örnek 1:

* { box-sizing: border-box; padding: 0; margin: 0; }
p { margin-left: 16px; }
.container { width: 400px; border: 1px solid #f00; margin: 16px; }
.container.col { -webkit-columns: auto 120px; columns: auto 120px; }
.container > div { 
	-webkit-column-break-inside: avoid; column-break-inside: avoid; 
	display: block; padding: 8px; border: 1px solid #ccc;
}
#one { width: 200px; }
#two { width: 300px; }

<p>Small Container (1-column):</p>
<div id="one" class="container col">
	<div class="item-min">Maudie Mcmanus</div>
	<div class="item-min">Remedios</div>
	<div class="item-min">Chaya B</div>
	<div class="item-min">Duncan</div>
	<div class="item-min">Lashonda</div>
</div>
<p>Medium Container (2-column):</p>
<div id="two" class="container col">
	<div class="item-min">Maudie Mcmanus</div>
	<div class="item-min">Remedios</div>
	<div class="item-min">Chaya B</div>
	<div class="item-min">Duncan</div>
	<div class="item-min">Lashonda</div>
</div>
<p>Large Container (3-column):</p>
<div id="three" class="container col">
	<div class="item-min">Maudie Mcmanus</div>
	<div class="item-min">Remedios</div>
	<div class="item-min">Chaya B</div>
	<div class="item-min">Duncan</div>
	<div class="item-min">Lashonda</div>
</div>

Keman 1: http://jsfiddle.net/abhitalks/tgwp4b7a/2/show

Yukarıdaki kod parçasında, kap column-count: auto ve bir keyfi column-width: 120px (sadece demo için) kullanıyoruz. Hepsi bu. Üç örnekte de yukarıdaki kod: (1) konteyner küçük genişlik ve içerik dağıtılmış bir sütun gibi kısıtlı tarafından column-width; (2) burada kaptır orta genişlik ve içerik dağıtılmış iki sütun olarak artık daha fazla alanı; ve (3) konteyner çok daha büyük genişlik ve kaldırabilir üç sütun.

Bir yan etkisi olarak, eğer kabın genişliği yüzde ise, o zaman tüm cihazları otomatik olarak duyarlı hale gelir. Daha küçük ekranlı bir sütun üzerine çöken büyük ekranlar daha fazla sütun gösteren, ve.

Ancak, bu column-width konteyner ve ara-sabit genişlikli bağlıdır ve bu nedenle de çağrılabilirsihirli sayıçözüm.Ama bu bizim istediğimiz değil. Sütunlar kabın genişliğine göre belirlemek istemiyoruz, sütunlar içerik genişliğine göre belirlenecek istiyoruz.İzleyen bu bağımlılığı ortadan kaldırmak için nasıl bölüm 2'de göreceğiz.

2, Javascript ile uzanan kısmı:

Öğeleri otomatik olarak sütun genişliği üst bağlı olarak kullanılabilir CSS tarafından dağıtılan kurduk, şimdi bu sabit genişlikte Javascript ile bizim bağımlılığı ortadan kaldırmak için genişletebiliriz.

Geri soru geliyor:

...Geniş bir öğe daha geniş olsa...

Geniş bir öğeyi belirlemek ve diğerleri için bu genişlik uygulamak için, sadece a well-known ihtiyacınız olan tek şey iki-liner Javascript:

var maxWidth = Math.max.apply(null, $("div.item").map(function () {
    return $(this).width();
}).get());

Biz de div40 ** sarma gerçek genişliğini tanımlamak için önlemek için s alt kümesi. Bölüm 1 yazdığımız CSS eklemek zorunda değildir.

.container > div {
    display: inline-block; 
    white-space: nowrap;   /* prevents wrapping and helps getting actual width */
}

O zaman yapmamız gereken iki şey: (1) set column-width konteyner için bu max-genişlik hesapladık yukarıda; ve (2) Bu genişlik için tüm çocuk div izin onları yığını düzgünce. Ayrıca, column-count / column-width Javascript bu yine de yapmak zorundayız, çünkü CSS, olması gerek olmayacaktır.

$("#container").css({ "column-width": maxWidth }).find('div').width(maxWidth);

Aşağıda parçasında tam bir örnek

Örnek 2:

//large
	var maxWidth = Math.max.apply(null, $("#one > div").map(function () { return $(this).outerWidth(); }).get());
	$("#one").css({ "-webkit-column-width": maxWidth, "column-width": maxWidth }).find('div').outerWidth(maxWidth);

	// medium
	var maxWidth2 = Math.max.apply(null, $("#two > div").map(function () { return $(this).outerWidth(); }).get());
	$("#two").css({ "-webkit-column-width": maxWidth2, "column-width": maxWidth2 }).find('div').outerWidth(maxWidth2);

	// small
	var maxWidth3 = Math.max.apply(null, $("#three > div").map(function () { return $(this).outerWidth(); }).get());
	$("#three").css({"-webkit-column-width": maxWidth3, "column-width": maxWidth3 }).find('div').outerWidth(maxWidth3);

* { box-sizing: border-box; padding: 0; margin: 0; }
	p { margin-left: 16px; }
	.container { width: 450px; border: 1px solid #f00; margin: 16px; }
	.container > div { 
		-webkit-column-break-inside: avoid; column-break-inside: avoid; 
		display: inline-block;  white-space: nowrap;
		padding: 8px; border: 1px solid #ccc;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<p>Normal children (wrapping):</p>
	<div class="container">
		<div class="item">Maudie Mcmanus</div>
		<div class="item">Remedios Arrington</div>
		<div class="item">Chaya B</div>
		<div class="item">Duncan</div>
		<div class="item">Lashonda Tatum Walls</div>
	</div>
	<p>Large children (1-column):</p>
	<div id="one" class="container">
		<div class="item-min">Maudie Mcmanus Mcmanus Mcmanus</div>
		<div class="item-min">Remedios</div>
		<div class="item-min">Chaya B</div>
		<div class="item-min">Duncan</div>
		<div class="item-min">Lashonda</div>
	</div>
	<p>Medium children (2-column):</p>
	<div id="two" class="container">
		<div class="item-min">Maudie Mcmanus Mcmanus</div>
		<div class="item-min">Remedios</div>
		<div class="item-min">Chaya B</div>
		<div class="item-min">Duncan</div>
		<div class="item-min">Lashonda</div>
	</div>
	<p>Small children (3-column):</p>
	<div id="three" class="container">
		<div class="item-min">Maudie Mcmanus</div>
		<div class="item-min">Remedios</div>
		<div class="item-min">Chaya B</div>
		<div class="item-min">Duncan</div>
		<div class="item-min">Lashonda</div>
	</div>

Keman 2: http://jsfiddle.net/abhitalks/ojd57678/4/show

(Parçacık yukarıda değişti ve keman. Teşekkürler .outerWdith jQuery .width yerine kullanılması gerektiği gerçeğini işaret eden @Yandy_Viera, box-sizing: border-box, yanlış genişlikleri ayarlanmış olması neden. sayar)

Yukarıdaki Pasajı, biz şimdi kullanarak üç varyasyon örnekleri: (1) çocuk divs daha büyük genişlik ve dağıtılmış bir sütun olarak onlar kısıtlı tarafından kabın genişliği; (2) burada çocuk divs küçük genişlik ve dağıtılmış iki sütun olarak artık daha fazla alanı; ve (3) çocuk divler çok küçük genişlik ve konaklamalı olarak üç sütun.

Gördüğünüz gibi CSS sütunlar mevcut genişliğine göre içerik yayma konusunda yardımcı olabilir ama elemanın en geniş onları her genişlikleri hesaplamak geçerli olamaz. Başlangıçta istediği bir iki espri bu Javascript için çalışmalar yapılırdı.

Ben ilk sana zaten seninle çalışmak bir Javascript çözümü var sanıyordum soruyu okuyun ve eğer bir tane istiyorsan emin değildim. not: Ancak, ikinci bir kitap için Javascript açısını anlamak için önemli olduğunu ve senin vermediğini fark ettim. Dolayısıyla, bu Javascript bir parça ekleyin.

NOT 2: sütun özellikleri otomatik değerleri temel bir yanlış girdim bu cevap bir önceki sürüm bir kusur vardı. Bu başka bir düzenleme gerektirmiştir.