Bugünün makalesinde, CSS kullanarak eşit yükseklikte sütunlar oluşturmanın yeni bir yolundan bahsetmek istiyorum. Sütun yüksekliklerini herkes için aynı yapmak için artık Javascript kullanmaya gerek yok. Bu yöntemin özü, bize aynı yükseklikte sütunlar oluşturmaktan çok daha fazla seçenek sunan yeni CSS3 özelliğini kullanmaktır. Ancak bu derste, bu acı verici sorunu çözmenin ne kadar kolay olduğuna bakacağız.
Sayfa düzeni
HTML bölümü
Daha sonra aynı yüksekliği CSS kullanarak yapacağımız iki sütun tanımlayalım:
| 1 2 3 4 5 6 7 8 | id="sayfa"> <div id="main"> </div> |
Yani, bloğun olduğundan emin olmamız gerekiyor. İki kutu içeren ana konteyner için flexbox tanımlayalım: Harika! Şimdi, ana içerikli merkezi blok ve kenar çubuğu için genişliği ayarlamaya devam ediyor: Açıklamalar: Sayfamız tamamlanmak üzere. Ancak ana içeriğe sahip blok daraldığında sayfa çok uzar. Bu nedenle, belirli bir ekran genişliği ile kenar çubuğunun ana içerikle bloğun altına girmesini ve mobil cihazlarda rahatça görüntülenmesini sağlayabiliriz: Fazla yer kaplamaması ve hantal görünmemesi için önekleri olmayan kod burada. Makalenin başındaki düğmeyi kullanarak tamamen çalışan bir örnek görebilirsiniz. Ayrıca bu yöntemin nerede çalıştığını da söylemeniz gerekiyor. Bu özellik oldukça yeni olduğu için modern Firefox, Chrome, Safari, Opera ve IE 11 tarayıcılarında çalışır. Bu makalede, CSS ile aynı yükseklikte sütunlar yapmayı öğrendiniz. Ancak bu, bu CSS özelliğinin tüm olanakları değildir. Esnek özelliği, blokları lastik gibi yapmanıza, tüm boş alanı kaplayarak öğeleri birkaç sütun veya satırda otomatik olarak düzenlemenize ve çok daha fazlasına olanak tanır. Ancak sayfa düzeni için en temel ve en önemlisi en sık kullanılan çözümü bu makalede ele aldık. Tercüme: Vlad Merzhevich CSS ile yapılması kolay olmayan birkaç şeyden biri, sütunları aynı yükseklikte yapmaktır. Farklı yaklaşımlar var, her birinin artıları ve eksileri var, burada dört yöntem göstermek istiyorum. Eşit yükseklikte sütunlarla ne demek istediğimizi düşünelim. Genel olarak, her sütundaki içeriğin aynı yükseklikte olmasını istemiyoruz. Eğer durum böyle olsaydı, kolonların yükseklikleri doğal olarak aynı olacağından problem yok. Aslında, aynı yükseklikteki sütunlarla, içinde içerik olmadan aynı görünen sütunları kastediyoruz. Bunu, sütunların arkasına eşit yükseklikte görünecek şekilde bir arka plan ekleyerek başarabiliriz. Sonuç olarak, hayali bir özdeş yükseklik elde ederiz. Asla boş sütunlar kullanmak istemedim. Kötü bir yöntem olduğu için değil, düz renk dolgusu için asla bir görüntü kullanmama gibi bir şeyim olduğu için. Bu nedenle, daha iyi bir terim olmadığı için sözde sütunlar diyeceğim, eşit yükseklikte sütunlar elde etmek için kendi yöntemimi geliştirdim. Kapsayıcıya bir arka plan eklemeyi içeren kukla sütunlar yöntemine benzer şekilde çalışır. Bu, eşit yükseklikteki sütunlar için genel bir yaklaşım değildir, dolayısıyla kapsamı sınırlıdır, ancak bu durumla karşılaşırsanız, her şey çok kolay ve anlaşılırdır. Yukarıdaki boş sütunlar yöntemindekiyle aynı HTML'yi kullanıyoruz.
Ana içerik CSS yine oldukça basittir. Çeşitlilik için akıcı bir düzen seçtim, ancak her şeyi sabit bir genişlik için de kolayca ayarlayabilirsiniz. #container ( arka plan: #555; taşma: gizli ) #içerik ( kayan nokta:sol; genişlik:%75; arka plan:#eee; ) #yan çubuk ( kayan nokta: sol; genişlik: %25; arka plan:#555; ) px yerine % kullanmaya ek olarak, #content ve #sidebar için arka plan rengini ayarladığımı unutmayın. Sadece daha yüksek olan herhangi bir sütun için ayarlamanız gerekir, ancak burada özellikle iki sütun için rengi belirledim. Sahte sütunlardaki ana değişiklik, arka plan görüntüsü yerine arka plan rengini ayarlamamızdır. Prensipte bu, kabın arka plan rengini kısa bir sütun üzerinden göstermekle aynıdır. Sınırlama şudur - hangi sütunun daha kısa olacağını önceden bilmeliyiz ve ideal olarak bu sütun sitenin tüm sayfalarında böyle olmalıdır. Oldukça ciddi bir sınırlama gibi görünüyor, ancak pratikte, iki sütundan birinin genellikle tüm sayfalarda olmasa da çoğunda daha kısa olduğunu görüyorum. Durumun böyle olmadığı sayfalarda, düzeltme, daha fazla veya daha az içerik eklemek kadar basittir. Bu yöntem mükemmel olmaktan uzaktır, ancak pratikte ne sıklıkta kullanılabileceğine şaşıracaksınız. Bu yöntemle kısa süre önce Smashing Magazine'de Thierry Koblenz'in bir makalesinde rastladım, ancak daha sonra Alan Pierce'ın A List Apart'ta birkaç yıl önce aynı yöntemle yazılmış bir makalesini buldum. Kenarlıklar ve negatif dolgu, eşit yükseklikte sütunların görünümünü vermek için kullanılır. Yukarıda gördüklerimizle karşılaştırıldığında HTML'de yeni bir şey yok. Thierry makalesinde gövdeyi kap olarak kullanıyor, ancak ben genellikle yaptığım gibi div kapsayıcısını kullanmaya devam edeceğim.
Ana içerik Eğlence CSS'de başlar. Kap sadece genişliği sabitlemek ve düzeni ortalamak için kullanılır. #content ve #sidebar ile ilginç şeyler olur. #container ( width:960px; margin: 0 auto; ) #content ( float:left; width:700px; border-left: 260px solid #555; ) #sidebar ( float: left; width:260px; margin-sağ: - 260 piksel; konum: göreli; ) Bu yöntemdeki tüm arka plan renkleri #content sütunu için ayarlanır. Arka planı her zamanki gibi ayarlıyoruz ve ardından kenar çubuğunun genişliğine eşit bir sol kenarlık ekliyoruz. Kenarlık rengi, kenar çubuğunun arka planıyla eşleşir. Burada durursak, görüntülenen sütunları göreceksiniz, ancak sol sınırımız kenar çubuğunu uzaklaştırıyor ve geri getirmemiz gerekiyor. İlk olarak, kenar çubuğuna, genişliğine eşit (veya içeriğin sol kenarlığının genişliğine eşit) bir negatif sağ kenar boşluğu verelim. Bu, kenar çubuğunu olmasını istediğimiz yere geri getirecek, ancak yine de görünmüyor. Sorun, iki div'in istifleme sırasıdır. #içerik, #kenar çubuğunun üstünde bulunur, bu nedenle #kenar çubuğunu öne taşımamız gerekir. Bunu, kenar çubuğuna konum: göreli ekleyerek yapıyoruz ve artık içeriği görünür durumda. Burada sahip olduğumdan daha ayrıntılı bilgi sundukları için yukarıda bağlantısını verdiğim her iki makaleyi de okumanızı tavsiye ederim. Her iki makale de bu yöntemi üçüncü bir sütunla kullanmak için kod içerirken, Thierry'nin makalesi sütunlar arasında kenarlıklar oluşturmaktan bahsediyor. Son yöntem Matthew James Taylor tarafından oluşturuldu. Burada sunulan tüm yöntemlerden bu sefer çok çeşitli kullanım durumlarında çalışacaktır. Yöntem biraz karmaşık olduğu için sona bıraktım ve nasıl çalıştığını anlamak için birkaç kez okumanız gerekebilir. HTML, yukarıda gördüğümüze benzer, ancak ekstra div kapsayıcısını fark edeceksiniz.
Ana içerik Diğer yöntemlerde olduğu gibi, bu kapları, arka plan renklerini sütunlarımıza aitmiş gibi görünecek şekilde ayarlamak için kullanacağız. CSS'de şimdiye kadar gördüğümüzden daha fazlası oluyor. #sidebar ve #content sola kaydırılır ve genişlik ayarlanır, bunun ötesindeki her şey yenidir. Bu yöntemin anahtarı, yüzen bir kabın içeriğiyle her zaman aynı yükseklikte olduğu fikridir. Kolonlarımızı yüzen konteynerlerin içine yerleştirerek konteynerlerin en uzun kolonun yüksekliğine eşit olmasını sağlıyoruz. #konteyner-dış ( kayan nokta:sol; taşma: gizli; arka plan: #eee; ) #kapsayıcı-iç ( kayan nokta:sol; arka plan: #555; konum: göreceli; sağ:75%; ) #yan çubuk ( kayan nokta: sol; genişlik: %25; konum: göreli; sol: %75; ) #içerik ( kayan nokta: sol; genişlik: %75; konum: göreli; sol: %75; ) İlk adım, sütunlara ve kaplara şamandıralar eklemektir. Sol değeri kullanıyorum, ancak bu durumda yön önemli değil. Düzeniniz için ihtiyacınız olan yönü kullanın. Sonraki adım, iki kapsayıcı div'in arka planını ayarlamaktır. Kenar çubuğu için istediğimi elde etmek için #container-inner için bir arka plan ve ana içerik için istediğimi elde etmek için #container-outer için bir arka plan ayarladım. Burada durursak, yalnızca iç içe geçmiş div için arka planı görürüz, çünkü yığınlama sırasında dış div'den daha yüksektir. Yalnızca kenar çubuğunun görünmesini istediğimiz yeri göstermesi için iç div'i hareket ettirmek için biraz konumlandırmaya ihtiyacımız var. Bu, dış div'in arka planının, içerik sütununun gösterilmesini istediğimiz yerden göstermesini sağlar. #container-inner (konum: göreceli; sağ: %75; ) İç sütunu konumlandırın ve doğru değeri içerik sütununun genişliğiyle aynı olan %75'e ayarlayın. Arka planlar hala orada, ancak her iki sütunun içeriği de %75 sola kaydırılmış. Onları yerlerine taşımamız gerekiyor. #kenar çubuğu ( konum: göreli; sol: %75; ) #içerik ( konum: göreli; sol: %75; ) Göreceli konumlandırmayı tekrar uyguluyoruz ve her iki sütunun içeriği %75 sola kaydırıldığından, bunu %75 sağa kaydırmamız gerekiyor. Bunu sol değeri %75 olarak ayarlayarak yapalım. Şimdi her şey olması gerektiği yere geri döndü. Genel olarak, bu en güvenilir yöntemdir ve her durumda çalışması garanti edilir. Gerçekten anlamak için onunla oynamanızı ve Matthew'un makalesini birkaç kez okumanızı tavsiye ederim. Matthew'un makalesi üç sütunlu bir düzen ile gelir ve ayrıca dört ve beş sütun için bir demosu vardır. Bu fikrin anlaşılmasını kolaylaştıracağını umarak iki sütunlu bir düzen göstermeye karar verdim. Bunlar hiçbir şekilde eşit yükseklikte sütunlar oluşturmanın tek yöntemi değildir. Chris Coyer, bir süre önce burada sunulanlara tercih edebileceğiniz CSS Püf Noktaları hakkında birkaç teknik daha paylaştı. Biraz araştırma ile bulunabilecek başka birçok yöntem de var. Bence bu makale ve Chris'in makalesi daha yaygın yöntemlerin çoğunu kapsıyor. Eşit yükseklikte sütunlar istenen bir tasarım özelliğidir, ancak CSS mizanpajlarıyla elde etmek her zaman kolay değildir. İdeal olarak height: 100% gibi bir şey kullanırdık ve bu kadar, ancak şimdilik yukarıda belirtilen yöntemlerden herhangi birini kullanabiliriz. kurulumu kolaydır, ancak görüntü için ek bir HTTP isteği gerektirir ve herhangi bir düzen değişikliği yeni bir görüntü gerektirir. daha da basit, ancak her iki sütunun göreceli yüksekliği bilindiğinde ve sayfalar arasında sabit olduğunda sınırlı kullanım. nispeten kullanımı kolaydır, sütun yükseklikleri hakkında öngörü gerektirmez ve birden çok sütuna son derece uyarlanabilir. Sabit genişlikte olması için yalnızca bir sütuna ihtiyaç vardır. çoğu durumda çalışır. Sütunların yüksekliğini önceden bilmenize gerek yoktur ve istediğiniz sayıda sütunla çalışabilirsiniz. Bu yöntem diğerlerinden biraz daha zordur. Zamanla daha basit bir standart çözüm bekliyorum ama şimdilik bu dört yöntem projeniz için yeterli olacaktır. Eşit yükseklikte sütunlara sahip mizanpajları ne sıklıkla tasarlıyorsunuz? Sütun oluşturmak için hangi yöntemi kullanıyorsunuz? Aynı satırda aynı yükseklikte bloklar yapın. Blokların yüksekliği içeriğe bağlıdır. Bu sorunu çözmek için aşağıdakilerden birini kullanabilirsiniz. Ancak burada, bazı durumlarda diğerlerinden daha uygun olan başka bir seçeneği ele alıyoruz. Her satır bir konteynere sarılacaktır. Bu kap, satırdaki en uzun bloğun yüksekliğine eşit olacaktır (içeriğe göre yükseklik uzatma özelliğini kullanıyoruz.). Bir satırdaki her blok, üst öğesini biçimlendirmek için ek bir öğeye sahip olacaktır. Bu ek öğe, ebeveynin genişliğine, %100 yüksekliğine ve mutlak konumlandırmaya sahip olacaktır. Yüksekliği sıradaki en uzun bloğa eşit yapmak için dekoratif elemanları sıra bloğuna göre konumlandırırız. Daha temiz ve daha semantik bir kod için dekoratif öğeler olarak sözde öğeler kullanıyorum. Açıklamalar çok net değilse, bir kod örneği her şeyi açıklığa kavuşturmalıdır: Satır ( konum: göreceli; /* üst öğenin yüksekliği en uzun alt bloğa göre uzatılır. Kenarlığı ona göre konumlandırmanız gerekir */ genişlik: 600 piksel; kenar boşluğu: 20 piksel; kayan nokta: sol; ) .item ( kayan nokta: sol; /* sınır konumlandırma sorunlarını azaltmak için yüzerdi */ genişlik: 150 piksel; dolgu: 5 piksel; kenar boşluğu: 20 piksel; ) .item:after ( içerik: ""; görüntü: blok; genişlik: 160 piksel; /* kenarlık genişliği, blok genişliğine eşittir -sütunlar */ yükseklik: %100; /* yükseklik = ana yükseklik = en uzun sütun kutusunun yüksekliği */ kenarlık: 1 piksel katı #0000FF; /* herhangi bir sütun dekoru burada olabilir */ -webkit-box- shadow: 0 0 5px #0000FF; -moz-box-shadow: 0 0 5px #0000FF; box-shadow: 0 0 5px #0000FF; konum: mutlak; üst: 0; sol: 20px; /* solu dikkate al element.item'in doldurulması */ z-index: -1; /* element.item içeriğinin kullanılabilir olması için */ ) /* sütunların boyutunu ve aralarında dolgu */ .item+.item:after ( sol: 200px; ) .item+.item+ . öğe:sonra ( sol: 380 piksel; ) IE7-8 için ek stiller ekliyoruz: Öğe ( z-index: ifade(runtimeStyle.zIndex = 1, insertAdjacentHTML("afterBegin", " Bu sayfa yapmak için örnekler içerir eşit yükseklikte sütunlar blok düzenlerinde. Birçok yeni başlayan yerleşim tasarımcısı için bu kesin bir sorundur, çünkü yükseklik yerleşim sütunlarında açıkça belirtilmemişse, içeriklerine uyacak kadar uzatılırlar. Buna göre, aynı yükseklik yerine, düzendeki her sütunun çok hoş görünmeyen kendine ait olduğu ortaya çıkıyor. Daha fazla netlik için, tüm örneklerde basılan altbilgi. Bu nedenle, aynı yükseklikte sütunlar oluşturmaya dahil olan bazı blokların veya CSS özelliklerinin en başından itibaren mizanpajlarda zaten mevcut olduğuna dikkatinizi çekiyorum. Yani, sonuç olarak, ikili işlevler gerçekleştirirler - altbilgiyi aşağıya doğru bastırır ve sütunları çekerler. Ancak, daha fazla kolaylık sağlamak için yalnızca sütunları çeken özellikler sağlanacaktır. CSS yorumları ve hala bir amaç için kullanılıp kullanılmadıkları önemli değildir. Bu örnek, ek sözde sütunlar ve mutlak konumlandırma ilkesine dayanmaktadır. Bunu yapmak için, sayfanın tam yüksekliğine kadar uzanan ve gerçek sütunların altına yerleştirilen birkaç blok (sütun sayısına göre) oluşturulur. Aynı yükseklikteki sütunların etkisinin ortaya çıkması için bu sözde sütunlara gerekli arka plan rengi verilir. Internet Explorer 6'nın bu eşit yükseklikte sütunlar oluşturma yöntemiyle ilgili sorunları olduğundan, birkaç hileler: Bu örnek, uygulanması en kolay olanıdır ve daha sonra sütunları taklit ederek dikey olarak "çarpılan" birkaç renkten (sütun sayısına göre) oluşan küçük bir "yatay" görüntünün oluşturulmasından oluşur. Ne yazık ki, bu yöntem yalnızca sabit düzenler için uygundur ve ayrıca, devre dışı bırakılmış resimlere sahip bir tarayıcıda sütun olmayacağını da unutmamalısınız.
Örnekte kullanılan arka plan görüntüsü görülebilir. Aynı yükseklikte sütunların görünümünün yaratılmasının yardımıyla oldu. Bu örnek oldukça sıra dışı bir teknik kullanır. İlk olarak, tüm sütunlara gerdirilmeleri nedeniyle çok büyük alt kenar boşlukları ve daha sonra aynı boyutta, ancak negatif alt kenar boşlukları verilir. Sonunda, "gereksiz" olan her şey basitçe kesilir.
Bu yöntem çapraz tarayıcıdır ve Internet Explorer 6 dahil herkes bunu anlar. Ancak altbilgiye basılma şekliyle birlikte düzgün çalışmayı reddeder. Bu yaşlı adam için başka bir "koltuk değneği" bulmadım, bunun yerine altbilgiye basmasına yardımcı olan birkaç özelliği kaldırdım. Bu nedenle, sütunlara içerik eklerken - IE6'da her şey beklendiği gibi uzar. Önceden, her şey tablolar kullanılarak düzenlendiğinde, aynı yükseklikte sütunlar oluşturmak çok kolaydı. Örneğin 3 sütunlu bir tablo oluşturmak yeterlidir ve hepsi otomatik olarak aynı yüksekliğe sahip olacaktır. Ancak blok düzeninde her şey o kadar basit değil. HTML Kodu: Sol Kenar Çubuğu( İçerik( Doğru ( daha net ( konteyner( Sol Kenar Çubuğu( İçerik( Sağ Kenar Çubuğu( İlgili Makaleler Android için profesyonel spor simülatörü Athletics 2, dünya standartlarında sporcu olmaya hazırlanan kendine güvenen gençler için oluşturuldu.... HiSuite, Huawei mobil cihazlarını bir bilgisayarla senkronize etmek için tasarlanmış resmi bir yazılımdır. Bu yönetici kapsıyor... 2017'nin yarısında Sony Mobile bir sürü akıllı telefon çıkarmayı başardı. Ama hangileri satın almak için en alakalı? Ve aralarından seçim yapmaya değer mi? Karadağ turları her yıl çok sayıda turist seçmektedir. Bu yönün popülaritesi, Karadağ'daki tatillerin ... Gizlilik ayarlarınızı değiştirme Sitede kabul etmek istediğiniz çerezleri seçin. İşlevsel çerezler nelerdir? Fonksiyonel...Aynı yükseklikte sütunlar
CSS bölümü
Çözüm
HTML
css
profesyoneller
eksiler
HTML
css
profesyoneller
eksiler
HTML
css
profesyoneller
eksiler
Ek kaynaklar
Özet
Çözüm
Konumlandırma kullanarak aynı yükseklikteki sütunlar
Örneğin açıklaması
Arka plan resmi kullanan aynı yükseklikte sütunlar
Örneğin açıklaması
Kenar boşlukları ve dolgulu eşit yükseklikte sütunlar
Örneğin açıklaması
Bu makalede, size eşit yükseklikte sütunlar oluşturmanın bazı yollarını ve bu yöntemlerin tarayıcılarla (IE6 dahil) nasıl uyumlu olduğunu anlatacağım. Bu yöntemlerin tümü, 3 sütunlu bir düzenin oluşturulmasını açıklar. Yöntem 1: display: table özelliğini kullanma
Düzeni uygulamak için satır ve sütunların her biri için iç içe bloklar içeren bir liste (ul) veya bir div bloğu kullanılır. Çevreleyen div, display: table ve iç içe geçmiş her sütun bloğu, display: table-cell olarak ayarlanmıştır.
Bir liste ile bir örnek düşünün.
HTML Kodu:
CSS:.temel(
/*%100 genişlik ve minimum 1000 piksel genişlik yap*/
genişlik: otomatik;
sol kenar boşluğu: 0px;
sağ kenar boşluğu: 0px;
minimum genişlik: 1000 piksel
dolgu: 0px
ekran:tablo;
}
.base-satır(
Ekran: tablo satırı
}
.base li(
görüntüleme:tablo hücresi;
genişlik: %33
}
.cell1(
arka plan rengi: #f00;
}
.cell2(
arka plan rengi: #0f0;
}
.cell3(
arka plan rengi: #00f;
}
Avantajlar:
Bu, diğer yöntemlerden farklı olarak aynı yükseklikte sütunlar oluşturmanın en basit ve en kolay yoludur.
Tablolar için hücre aralığı gibi kenar boşluğu tüm sütunlar için eşit oluşturulamaz, ancak girintiyi taklit etmek için uygun genişliğe sahip beyaz bir kenarlıkla (veya sütun arka plan rengiyle) değiştirilebilir. Kusurlar:
Bu yöntem IE7 ve altındaki tarayıcılarda çalışmaz. Bu yöntemi güvenle kullanabilmemiz uzun zaman alacak (IE7 yeni IE6 olduğunda). Yöntem 2: JavaScript'i Kullanma
Bu yöntem, her sütun için istenen yüksekliği en uzun olanın yüksekliğine göre "düzenleyen" küçük bir JS kodunun (JQuery) kullanımına dayanmaktadır.
HTML Kodu:
CSS:.konteyner(
Genişlik: 900 piksel
sol kenar boşluğu: otomatik;
Sağ kenar boşluğu: otomatik;
}
.Sol Kenar Çubuğu(
yüzer: sol;
Genişlik: %33;
}
.içerik(
yüzer: sol;
Genişlik: %33;
}
.Sağ Kenar Çubuğu(
yüzer: sol;
Genişlik: %33;
}
JavaScript (jQuery):fonksiyon setEqualHeight(sütunlar)
{
var en uzun sütun = 0;
sütunlar.her(
işlev()
{
akımYükseklik = $(bu).yükseklik();
if(currentHeight > en uzun sütun)
{
en uzun sütun = geçerli Yükseklik;
}
}
);
sütunlar.yükseklik(en uzun sütun);
}
$(belge).hazır(işlev() (
setEqualHeight($(".container > div"));
});
JS kodunu ayrı bir dosyaya koyabilir ve doğrudan HTML kodunda çağırabilirsiniz. Bu durumda, jQuery başlatma yukarıda arka plan kod olmalıdır.
Değiştirmeniz gereken kod, sütunları oluşturan bloğun sınıf adıdır. Bu örnekte, bu kap sınıfıdır:
Sütun bloğunun sınıf adını değiştirebilir, hatta her sütun bloğuna bir sınıf ekleyebilir ve kolaylık sağlamak için bunları ayrı ayrı kullanabilirsiniz. Avantajlar:
Bu yöntemin ana avantajı, tüm tarayıcılarda çalışması ve yükseklik hizalaması için CSS koduyla uğraşmanıza gerek olmamasıdır. Kusurlar:
JavaScript devre dışı bırakılırsa, buna göre sütunlar eşit yükseklikte olmayacaktır. Ancak, kural olarak, bu çok nadir bir durumdur, çünkü. çoğu modern web sitesi JS'nin etkinleştirilmesini gerektirir. Yöntem 3: yapay sütunlar
Bu yöntem, eşit yükseklikte sütunları ilk uygulayanlardan biriydi. Özü, çerçeveleme bloğuna sütunları taklit eden bir arka plan atanmasıdır (aşağıdaki şekle bakın). Basitçe bu arka plan üzerine bindirilirler. Eşit yükseklik efekti, yinelenen bir arka plan tarafından oluşturulur.
CSS:.konteyner(
arka plan resmi: tile.png;
arka plan-tekrar: tekrar-y;
genişlik: 900 piksel
sol kenar boşluğu: otomatik;
sağ kenar boşluğu: otomatik;
yüzer: sol;
genişlik: 200 piksel
}
yüzer: sol;
genişlik: 400 piksel
}
yüzer: sol;
genişlik: 300 piksel
}
ikisini de temizle;
}
Avantajlar:
Çok basit bir uygulama. Kusurlar:
Bu yöntem yalnızca sabit genişlikli düzenler/sütunlar için kullanılabilir. Yöntem 4: Arka planda ayrı bloklar kullanma
Bu yöntem, her biri farklı bir arka plana sahip olan ve içerdiği öğenin yüksekliğini alan ayrı div'lere dayanır.
HTML Kodu:
CSS:.sağ arka(
genişlik: %100
yüzer: sol;
arka plan rengi: yeşil;
taşma:gizli;
konum:göreceli;
}
.contentback(
yüzer: sol;
arka plan rengi:mavi;
genişlik: %100
konum:göreceli;
sağ: 300 piksel; /* sağ kenar çubuğunun genişliği */
}
.sol arka(
genişlik: %100
konum:göreceli;
sağ: 400 piksel; /* içerik alanının genişliği */
yüzer: sol;
arka plan rengi: #f00;
}
genişlik: 900 piksel
sol kenar boşluğu: otomatik;
sağ kenar boşluğu:oto;
}
yüzer: sol;
genişlik: 200 piksel
taşma:gizli;
konum:göreceli;
sol: 700 piksel;
}
yüzer: sol;
genişlik: 400 piksel
taşma:gizli;
konum:göreceli;
sol: 700 piksel;
}
yüzer: sol;
taşma:gizli;
genişlik: 300 piksel
arka plan rengi:#333;
konum:göreceli;
sol: 700 piksel;
}
Kolay görünmüyor, değil mi? Ana şey 5 ana noktayı anlamaktır:
.leftback .leftsidebar ile eşleşir,
.contentback - .content
ve .rightback - .rightsidebar.
Noktalı çizgi, sütunların görünür alanını gösterir (.rightback kutusu taşma ile kırpılır: gizli).
Aşağıdaki resimde kırmızı çizginin altındaki siyah çizgiler elementlerin içeriğidir.
3 öğenin tümü, göreli konum kullanılarak C'nin soluna kaydırılır.
C=B+G
Bu yöntem ayrıntılı olarak açıklanmıştır
Altın Numaralar Güzel bir telefon numarası nasıl satılır
Kripto para madenciliği: basit kelimelerle nedir
En iyi dizüstü bilgisayar işletim sistemi: Eksiksiz inceleme
Sınıf arkadaşlarından müzik indirmek için programlar Sosyal ağ sınıf arkadaşlarından üzücü bir şarkı indirin
Yandex tarayıcısının mobil versiyonu