CSS'te yazıyı yan yana 2 kolon halinde yazmak (Tablosuz)

Bir yazınız var ve siz bu yazıyı yan yana iki kolon şeklinde yazmak istiyosunuz. Normalde bunu css kullanmadan table kullanarak

<table>
<tr>
<td>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</td>
<td>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</td>
</tr>
</table>

Ancak veritabanından alınacak bir yazının ne kadar uzunlukta olacağını tahmin edemeyebilirsiniz. CSS ile ufak bir kod bloğu ile bunu yapabilmek mümkün o da şu şekilde

HTML

<div class="Yazi">
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.<br /><br />
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
</div>

CSS

.Yazi
{
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
    
     -webkit-column-gap:20px;
    -moz-column-gap:20px;
    column-gap:20px;
    }

columns özelliği kolon sayısıdır. Sayıyı istediğiniz kadar arttırabilirsiniz.
Column-gap özelliği ise paragraflar arasındaki boşluk anlamına gelmektedir.

Destekleyen tarayıcılar

Google Chrome
Mozilla Firefox
Opera
Safari
Ä°E 9'a kadar desteklemiyor.

Kaynak:

http://haktantekin.blogspot.com/2013...n-halinde.html

Sanırım bugün güzel günümdeyim tam bu koda ihtiyacım vardı ne yapsam ne etsem diye bakınırken açtığım ilk konuda sorunum çözüldü, teşekkürler

Rica ederim hocam ne mutlu

Hocam şöyle bir şey yapabilir miyiz? Dediğiniz şekilde 2'li kolonlar halinde sıralayabiliyorum fakat mesela birkaç satır girince hemen yan yana listelemesinden ziyade belli bir uzunluğa geldiği vakit 2. kolona geçirebilir miyiz?

Yani mesela 4 satırım var bunu 2 kolon halinde 2 satır listelemesi yerine, ilk 10 satır birinci kolonda olsun, birinci kolon belirli bir yüksekliğe ulaştığında sonraki kolona atsın. Bunun için sanırım css'e bir kod eklememiz gerekiyor.

Şu kadar satırdan sonra atsın gibi bi özelliği var mı bilmiyorum ancak bi genişlik değeri vererek kurcalamıştım örnek şöyle

http://jsfiddle.net/Haktan/CL2dh/1/

genişlikle oynadıkça kolonu daraltır ya da açarsınız aralığı da zaten column-gap ile oynayabiliyorsunuz.