Pek çok farklı ekran boyutu ve çözünürlüğünün ortaya çıkmasıyla birlikte, ekranın tüm genişliğini kapsayan sabit metin bloklarıyla tasarımlar oluşturmak inanılmaz derecede pratik hale geldi. Geleneksel yaklaşım, metni iki sütuna bölmektir ve bu genellikle manuel olarak yapılır ve zaman alıcıdır. Veya metin, tüm durumlar için uygun olmayan javascript kullanılarak bölünür. Ayrıca bunu CSS ile grid sistemlerine veya float'lara başvurmadan yapabilmemiz gerekir, değil mi?

CSS3 aslında size metni birden çok sütuna bölme ve olukları (sütunlar arasındaki boşluk) boyutlandırma yeteneği verir, böylece bir çerçeve veya ızgara sistemi kullanmak yerine sütunlar üzerinde tam kontrole sahip olabilirsiniz.

Ek olarak, CSS3, kullanıcının örneğin Netscape Navigator'ı kullanması durumunda harika geri dönüşler sağlar - sitenizin düzeni yine harika görünecektir.

tarayıcı desteği

Hemen hemen tüm modern tarayıcılar CSS3'te birden çok sütunu desteklerken (evet, hatta IE10), IE9 gibi birçok eski tarayıcının bu desteği sağlamadığını belirtmek önemlidir. Destek oldukça iyi olsa da, webkit (-webkit-) ve mozilla (-moz-) için tarayıcı öneklerini kullanmanız gerekebilir. Ancak, tam veya kısmi destekle geldikleri için IE ve Opera için -ms- veya -o- kullanmanız gerekmez.

Seçenekler

Bu CSS özelliği, içeriğinizin tarayıcı penceresinde nasıl görüntüleneceğini kontrol etmeniz için size birkaç seçenek sunar ve şu seçeneklere bir göz atalım:

* sütun sayısı: burada öğede görüntülenecek sütun sayısını belirleyebilirsiniz.
* sütun genişliği: tek bir sütunun genişliği. Bazen tarayıcıların bu değeri kendi başlarına değiştirebileceği gerçeğine hazırlıklı olun.
* sütun boşluğu: sütunlar arasındaki oluğun genişliği.
* sütun-kural genişliği: bunlar sütunlarınızın sınırları gibidir ve burada kenarlığın genişliğini belirtmeniz gerekir.
* sütun kuralı stili: ayrıca stili ayarlamanız gerekiyorsa bir tür kenarlık.
* sütun-kural-renk: Bu parametre renk belirtmek için kullanılır.
* sütun aralığı: Bu değer, tarayıcıya kaç sütunu birleştirmek istediğinizi söyler - üstbilgiler için kullanmak iyidir ve tablolarda colspan ve rowspan gibi işler.

Tüm bu seçeneklerle, sütunları yönetmek için başka bir şeye ihtiyacımız olduğunu düşünmüyoruz. Tabii ki, birden fazla hoparlörün normal çalışması için bu parametrelerin tümüne mutlaka ihtiyacımız yok. Ayrıca, temel olarak, yalnızca column-count parametresine ihtiyacımız var, ancak muhtemelen her zaman column-gap'i de kullanacaksınız, böylece sütun metninin sınırlarıyla birleşmeyecektir.

Bunu uygulamaya koymak için sadece birkaç satır koda ihtiyacımız var:

/ * Bu, her sütun arasında 20 piksel boşluk bulunan 3 sütunlu bir düzen üretecektir * /
.cols3 (
sütun sayısı: 3;
sütun aralığı: 20 piksel;
}
Sütunlara da bir kural uygulamak istiyorsanız, şu parametreleri eklemeniz gerekir:

/ * Bu, 3 sütunlu bir düzen ve her sütun arasında 20 piksel boşluk ve 1 piksellik düz siyah kural oluşturur * /
.cols3 (
sütun sayısı: 3;
sütun aralığı: 20 piksel;
sütun-kural genişliği: 1 piksel;
sütun kuralı stili: katı;
sütun-kural-renk: # 000;
}
Bilinen border parametresinde olduğu gibi renk, stil ve genişlik uygulayabilirsiniz:

Sütunlar3 (
sütun sayısı: 3;
sütun aralığı: 20 piksel;
sütun kuralı: 1 piksel katı # 000;
}
Bir başlığınız varsa ve bu başlığın tüm sütunların tam genişliğine yayılmasını istiyorsanız, aşağıdaki kod satırını eklemeniz gerekir:

/ * Bu h1, 3 sütunun yerini alacak * /
.cols3 h1 (
sütun aralığı: tümü;
}
Bu tekniği, tek bir paragraftan birden çok div'e kadar hemen hemen her HTML koduna uygulayabilirsiniz. Bir demoya bir göz atalım:

Ve şimdi size bu etkinin tam kodunu sunmak istiyoruz:

tamamlama

Bize göre CSS kullanarak sütun oluşturmaya geçmek bize birçok avantaj sağlıyor - artık bir tür matematik hesaplamaları yapmamıza, kayan öğeler oluşturmamıza ve kullanıcılar tarayıcı penceresini yeniden boyutlandırdığında içerik kırılmasına katlanmamıza gerek yok. Ayrıca daha semantik bir şekilde kod yazabilirsiniz ve bu yöntem tüm modern tarayıcılar tarafından desteklendiği için bugün ona geçiş yapabilirsiniz.

Sütunları CSS3 ile mi şekillendiriyorsunuz, yoksa hala kayan nokta ve konumlandırma mı kullanıyorsunuz? Eski tarayıcılarla ilgili sorunları aşmak için hangi yöntemleri kullanıyorsunuz? Yorumlarda bizimle paylaşın.

Konuma devam ediyorum CSS3'te Yeni: çok sütunlu, esnek kutu, ızgara düzeni, basit ve açıklayıcı örneklerle çok sütunlu özelliğine daha derin bir dalışla makalenin bir çevirisini sunuyorum.

Gazeteler ve dergiler bile pratikte birkaç sütuna bölünmüş bir metnin çok daha kolay algılandığını kanıtladı. Web sayfalarında, yakın zamana kadar içeriği bu şekilde görüntülemek bir sorundu, mizanpaj tasarımcısının metni birden çok div'e böldüğü noktaya geldi, ancak CSS3 Çoklu Sütun Modülü ile işler çok daha kolay hale gelebilir.

Birden çok sütuna bölünmüş içerik oluşturma

HTML5 etiketini kullanma makale:

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et, augue'de rutrum. Donec vel tempor dolor. Donec volutpat saçak porta. Suspendisse sıfır olmayan işkenceci. Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Tamsayı bibendum convallis sapien, otur amet tincidunt orci placerat in. Tamsayı özgeçmiş augue. //vesaire.

Metni iki sütuna böldük:

Makale (-webkit-column-count: 2; -moz-column-count: 2; column-count: 2;)

mülkü kullanma sütun genişliği sütunları gerekli genişliğe ayarlayabilirsiniz:

Makale (-moz-column-width: 150px; -webkit-column-width: 150px; column-width: 150px;)

Sütun aralığı

Aralık, özellik tarafından belirlenir sütun boşluğu px veya em cinsinden ve negatif olamaz:

Makale (-webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px;)

Sütun ayırıcı

Mülk sütun kuralı sütunlar arasına bir ayırıcı eklemenize izin verir, çalışma prensibi şuna benzer: sınır.

Makale (-moz-sütun kuralı: 1px noktalı #ccc; -webkit-sütun-kuralı: 1px noktalı #ccc; sütun kuralı: 1px noktalı #ccc;)

Sütunları birleştirme

Mülk sütun aralığı ile benzer şekilde çalışır kol açıklığı v tablo istediğiniz sütunları birleştirerek.

Madde h1 (-webkit-column-span: tümü; column-span: tümü;)

Sonuç

CSS3 Çoklu Sütun Modülü sayesinde metinleri çok kolay ve hızlı bir şekilde okunabilir sütunlara bölebilirsiniz. Desteklenen tarayıcıların listesi, üretim projelerinde çok sütunlu üzerinde denemek için zaten yeterli. Eski tarayıcılar için özel bir

Adımın Rimal olduğunu ve HTML & CSS gibi web siteleri için mizanpaj tasarımına düşkün olduğumu söylediğim kısmı geçelim.

Ayrıca %100 uyarlanabilirlik ve çapraz tarayıcı uyumluluğu ile mükemmel şablonu oluşturma hayalim olduğunu söylediğim kısmı da atlayacağız.

İnternette, N-sütun site blokları oluşturmak için normal bir açıklama bulamadım, her zaman ve her yerde çarpık ve çirkin bir kod vardı.

Amacımız, blokları şöyle olacak üç sütunlu bir site yapmaktır:

1. Ekranın boyutuna göre küçültür (yani aşağı inmez);
2. Ekranın tüm genişliği boyunca gerin (genellikle 2 sütunlu bir site);
3. Verilen boyutları azaltırken uyarlayın.

Öyleyse başlayalım. Yatay 3 sütun yapmak için özelliği kullanacağız ekran: satır içi blok... Evet, float özelliği artık o kadar alakalı değil, ama yine de buna ihtiyacımız var.

Onlar için özellikleri ayarlamadan önce 3 blok oluşturalım, bunları sınıflara saralım. ana ve Çizgide:

Sonuç:

900 pikselden büyük pencere boyutu

900 pikselden küçük pencere boyutu

Bazen site tasarımının belirli boyutlara hemen uyum sağlamaması gerekir, yani. sitenin herhangi bir bölümü kaybolmadı, ancak yalnızca boyutları küçültülerek tüm işlevsellik korundu.

Tasarımı ekranın tüm genişliğine kadar uzatmak için özelliği kaldırmak yeterlidir. maksimum genişlik: 700 piksel sınıfta ana.

Tasarımın küçük pencere boyutlarında tamamen küçülmemesi, ancak uyum sağlaması için @media stillerine bir istek ekleyin:

/ * Basit bir @media isteği örneği * / @media (maks-genişlik: 600px) (.inline div (display: blok; / * Blokları "Bloklu", yani birbirinin altında yapmak * / genişlik: %100; / * Tam ekran genişliğine ayarla * / yükseklik: 100 piksel;))

Daha fazla ayrıntı JS Fiddle'da bulunabilir - daha iyisi için kodda yapılacak herhangi bir değişiklik memnuniyetle karşılanır.

Materyal için abonemize teşekkürlerimizi sunarız,

Vlad Merjeviç

Sitelerde genellikle iki sütunlu modüler bir ızgara kullanılır, kural olarak bir sütun ana materyali (örneğin bir makalenin metni) içerir ve ikincisi site bölümlerine ve diğer bilgilere bağlantılar içerir. Böyle bir düzen oluşturmak için tablolar oldukça uygundur - her hücre ayrı bir sütun görevi görür, bu da çeşitli belge görüntüleme parametrelerini ayarlamayı kolaylaştırır.

Sütun genişliği

Başlangıç ​​olarak, sol sütunun genişliği piksel cinsinden sabit kodlandığında ve sağ sütunun genişliği tarayıcı penceresinin boyutuna bağlı olarak değiştiğinde en basit seçeneği ele alalım. Bunu yapmak için, etiketin width niteliği aracılığıyla tüm tablonun toplam genişliğini yüzde olarak ayarlamanız gerekir.

ve ilk hücre için, genişliğini piksel veya yüzde olarak, genişlik özniteliğini de kullanarak ayarlayın, ancak etiket için

(örnek 1). Örnek 1. Piksel cinsinden sütun genişliği Sol sütun Sağ sütun Bu örnekte, tablonun kenarlığı görüntülenmez ve hücrelerin içeriğinin yukarıya dikey hizalaması, üst değerine sahip valign özniteliği tarafından belirlenir. Bu, hücrelerin içeriğinin farklı bir hacmiyle birbirlerine göre kaymamaları, ancak aynı şekilde üst kenardan başlamaları için gereklidir. Genişlik ve valign nitelikleri, aynı değerlere sahip genişlik ve dikey hizalama stili özellikleriyle değiştirilebilir. Ardından bu kod şöyle görünecektir (örnek 2). Örnek 2. Stilleri kullanma Sol sütun Sağ sütun Sütunlar içindeki kenar boşlukları Sütunlar arasındaki boşluk, etiketin cellpadding özelliği tarafından kontrol edilir. ... Hücre doldurma, bir hücrenin sınırından içeriğinin kenarına olan mesafeyi belirlediğinden, farklı sütunların içerikleri arasındaki boşluk, bu parametrenin değerinin iki katına eşit olacaktır. Stilleri, özellikle padding özelliğini kullanarak, her sütun için padding değerini kolayca ayarlayabilirsiniz (örnek 3). Örnek 3. Alanları kullanma Sol sütun Sağ sütun Bu örnekte, cellpacing ve cellpadding niteliklerinin değerleri sıfırdır ve sütun içerikleri arasındaki boşluk, sol hücreye leftcol adlı bir tanımlayıcı aracılığıyla eklenen padding-right özelliği tarafından belirlenir. Benzer şekilde, girintiler sadece sağ tarafta değil, aynı zamanda her hücrenin diğer taraflarında da ayarlanabilir. Örnek 4, stiller aracılığıyla tüm hücreler için kenar boşluklarının nasıl ayarlanacağını gösterir. Örnek 4. Hücrelerdeki alanlar Sol sütun Sağ sütun Sütun arka plan rengi Bir sütunu diğerinden görsel olarak ayırmak için, en yaygın olanı belki de bir arka plan renginin kullanılması olan farklı teknikler kullanılır. Stiller arasında rengi belirtmek daha iyidir, bu, sayfa tasarımını ayrı bir dosyaya getirmenize olanak tanır. Bunu yapmak için yeni bir stil sınıfı oluşturun, bunun için arka plan özelliğini ayarlayın ve bunu gerekli hücreye uygulayın (örnek 5). Örnek 5. Arka plan rengi Sol sütun Sağ sütun Bu örnekte, sağ ve sol sütunlar için farklı bir arka plan rengi eklenmiştir (Şekil 1). Pirinç. 1. Farklı renklerde sütunlar Sütun ayırıcı Kenar boşluklarının kullanılması, istenen hoparlör aralığını ayarlamak için her zaman uygun değildir. Örneğin, metnin etrafındaki alanların çeşitli nedenlerle dahil edilememesi durumunda. Ardından, sütunlar arasında ayırıcı görevi gören bir hücre daha eklemek yardımcı olacaktır (örnek 6). Örnek 6. Üç hücre kullanma Sol sütun Sağ sütun Bu örnek, stil tanımlayıcı aralayıcıya sahip başka bir sütunu tanıtır; bu, sütunlar arasındaki genişliği değiştirmeyi kolaylaştırır. Bu hücrenin içine hiçbir şey koyamazsınız, tarayıcılar bu tür hücrelerle oldukça doğru çalışır. İncirde. 2 örneğin sonucunu gösterir. Netlik ve "güzellik" için sütunların etrafına bir bordür eklenmiştir. Sütunlar arasındaki çizgi Sütunları yalnızca arka plan rengini ve beyaz boşluğu kullanarak değil, sütunların arasına bir çizgi ekleyerek de ayırabilirsiniz. Yine, stillerin kullanışlı olduğu yer burasıdır, bu da çizgi oluşturmayı çok daha kolay hale getirir. Sağ sütun için border-left özelliğini veya sol sütun için border-right özelliğini ayarlamanız yeterlidir (örnek 7). Örnek 7. Bir satır ekleme Sol sütun Sağ sütun Bu örneğin sonucu aşağıda gösterilmiştir. Özet Tabloları kullanarak sütun oluşturmak oldukça basit ve hızlı bir işlemdir, sadece iki hücreli bir tablo eklemeniz ve görsel niteliklerini tanımlamanız yeterlidir. Ayrıca, tablonun görünümünü belirleyen parametrelerin çoğu stillere getirilebilir ve böylece aynı tür tablo ve bunlara dayalı olarak belge ekleme sürecini hızlandırabilir. İki sütunlu bir düzen ile farklı sütun stil araçları kullanılır. Örneğin, bir arka plan dolgusu kullanırsınız, sütunların etrafına kenarlık eklersiniz, aralarındaki boşluğu değiştirirsiniz veya dikey bir bölme çizgisi ayarlarsınız. Tüm bunlar stillerle yönetilir, bu da daha kısa koda, tabloları değiştirmek için daha fazla seçeneğe ve site geliştirme kolaylığına yol açar. Konumun devamında, size basit ve açıklayıcı örneklerle çok sütunlu özelliğe daha derin bir daldırma ile makalenin bir çevirisini öneriyorum. Gazeteler ve dergiler bile pratikte birkaç sütuna bölünmüş bir metnin çok daha kolay algılandığını kanıtladı. Web sayfalarında, yakın zamana kadar içeriği bu şekilde görüntülemek bir sorundu, mizanpaj tasarımcısının metni birden çok div'e böldüğü noktaya geldi, ancak CSS3 Çoklu Sütun Modülü ile işler çok daha kolay hale gelebilir. Birden çok sütuna bölünmüş içerik oluşturma HTML5 etiketini kullanma makale: Lorem ipsum dolor sit amet, conectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et, augue'de rutrum. Donec vel tempor dolor. Donec volutpat saçak porta. Suspendisse sıfır olmayan işkenceci. Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Tamsayı bibendum convallis sapien, otur amet tincidunt orci placerat in. Tamsayı özgeçmiş augue. //vesaire. Metni iki sütuna böldük: Makale (-webkit-column-count: 2; -moz-column-count: 2; column-count: 2;) mülkü kullanma sütun genişliği sütunları gerekli genişliğe ayarlayabilirsiniz: Makale (-moz-column-width: 150px; -webkit-column-width: 150px; column-width: 150px;) Sütun aralığı Aralık, özellik tarafından belirlenir sütun boşluğu px veya em cinsinden ve negatif olamaz: Makale (-webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px;) Sütun ayırıcı Mülk sütun kuralı sütunlar arasına bir ayırıcı eklemenize izin verir, çalışma prensibi şuna benzer: sınır. Makale (-moz-sütun kuralı: 1px noktalı #ccc; -webkit-sütun-kuralı: 1px noktalı #ccc; sütun kuralı: 1px noktalı #ccc;) Sütunları birleştirme Mülk sütun aralığı ile benzer şekilde çalışır kol açıklığı v tablo istediğiniz sütunları birleştirerek. Madde h1 (-webkit-column-span: tümü; column-span: tümü;) Sonuç CSS3 Çoklu Sütun Modülü sayesinde metinleri çok kolay ve hızlı bir şekilde okunabilir sütunlara bölebilirsiniz. Desteklenen tarayıcıların listesi, üretim projelerinde çok sütunlu üzerinde denemek için zaten yeterli. Eski tarayıcılar için özel bir İlgili Makaleler Android akıllı telefon nasıl güvenlik kamerasına dönüştürülür Çince klavye neye benziyor (geçmiş ve fotoğraflar) Avatarların psikolojideki değeri Avatarların psikolojideki değeri MS Word'de bir harf nasıl vurgulanır Bir kişinin avatarı ne anlama geliyor? En son makaleler 2021-11-11 12:38:28 Kendi Twitter Anınızı Nasıl Yaratabilirsiniz? 2021-11-11 12:38:28 Bir sosyal ağdaki bir avatar sahibi hakkında ne söyleyebilir? 2021-11-11 12:38:28 Kendi Twitter Anınızı Nasıl Yaratabilirsiniz? Popüler Makaleler Taramalı Atomik Kuvvet Mikroskobu Laboratuvar raporu şunları içermelidir: Havai iletişim ağı için destek seçimi AC katener tasarımı ve hesaplanması Mikroişlemci sistemlerinin geliştirilmesi Mikroişlemci sistemlerinin tasarım aşamaları mcs51 ailesinin mikrodenetleyicileri Editörün Seçimi 2021-11-06 10:20:40 Delphi programlama ortamı Delphi görsel programlama sistemi, geniş bir kullanıcı yelpazesi arasında çok popülerdir: sıradan insanlardan sisteme ... 2021-11-06 10:20:40 Mikrodenetleyiciler MCS-51: yazılım modeli, yapısı, talimatları UDC 681.5, 681.325.5 (075.8) BBK 32.973.202-018.2 i 73 Shcherbina A.N. Bilgisayar makineleri, sistemleri ve ağları. Mikrodenetleyiciler ve mikroişlemciler ... 2021-11-06 10:20:40 Kodlama teorisi. Kodlama türleri. Kodlama teorisinin doğuşu Kodlama yöntemlerinin sınıflandırılması "Bu kursun amacı sizi teknik geleceğiniz için hazırlamaktır." Merhaba, Habr. "Siz ve işiniz" harika makalesini hatırlayın (+219, 2442 yer imi, ... 2021-11-06 10:20:40 Geri Besleme Kaydırma Kayıtları Doğrusal Geri Besleme Kaydırma Kaydı c Doğrusal bir geri besleme kaydırma kaydı (LFSR), değeri ... olan bir bit sözcük kaydırma kaydıdır. 2021-11-01 11:09:32 Sörf ve otomatik sörften nasıl para kazanılır? Sörften kazanç: sörf özellikleri + 5 avantaj ve dezavantaj + otomatik sörf için 3 özel program + 5 popüler hizmet ... rzdoro.ru Demir Windows 10 Tarama Windows 7 Windows XP Yazıcı Sürücüleri dizüstü bilgisayarlar Windows 8 Ses videosu gadget'lar Çeşitli Linux