Her türden yatay düzenler, bunu yapabileceğinizi öğrendiğimden beri beni şaşırttı. Tam olarak neden onlardan etkilendiğimi bilmiyorum… belki de sadece iç isyancı konuşuyor. Sebep ne olursa olsun, sadece son kayda değer olan dikey kaydırma, passé ve soooo deklare etmeye hazırım.

Tamam, demek istediğim bu değil. Yine de, etrafta bulunan dokunmatik ekranların miktarındaki ani artışla, “yukarı ve aşağı” nın en iyi seçeneklerimiz olduğunu söylemek zorlaşmaktadır. "Sağ ve sol", önemli miktarda metinle uğraşmadığınız sürece içerik yerleşimi için geçerli yönergeler haline gelmiştir.

Yine de, herhangi bir yatay düzen inşa etmekten asla rahatsız olmadım. Teknik problemler ve sınırlamalar her zaman var olabilecek herhangi bir stilistik veya seyirsel faydadan daha ağır basıyor gibi görünüyordu. Ancak bu daha önce vardı; ve şimdi bu…

Bu makalede anlatılan teknikle genellikle bir şeylere rastladığım gibi karşılaştım: tamamen başka bir şey yapmaya çalışarak. Ekrana dayalı bir CSS ızgara çerçevesi oluşturmak için (gülebilirsiniz) deniyordum: tablo hücresi (tamam, şimdi gülmeyi kes).

Eh, şimdi açıkça görünen nedenlerden dolayı, işe yaramadı. Tablo hücresi özelliği ile duyarlı bir görüntü ızgarası yapmayı deneyin. Devam et, bekleyeceğim.

Basitçe söylemek gerekirse, masa hücreleri tek bir yatay sıra oluşturmak için tasarlanmıştır. (Gülmeyi kes dedim!) Yaptıkları şey bu, ve başka bir şey yapmaları için uğraşırken hoşlanmıyorlar. O projeden vazgeçtim. Birkaç hafta sonra, yine de portföyümü yeniden tasarlamayı düşünüyordum.

Tüm projelerimi tek bir sayfaya koymanın güzel olacağını düşündüm. Web, yazı ve fotoğraf projemi görüntülemek için çeşitli organizasyonel çözümleri düşündüm ve bununla birlikte ortaya çıktım: Bu üç kategoriyi yatay olarak küçük satırlar halinde kaydırmak istiyorum.

O zaman bana çarptı: “Masa hücreleri bunun için mükemmel olurdu. Ayrıca, içlerindeki şeyleri dikey olarak merkezleyebilirsiniz! Çok akıllıyım, acıtıyor! ”[Bazı dramatizasyon burada.]

Henüz sitemi yeniden tasarlamadım ve yeniden tasarladım, bunun yerine, bu makalenin en altında bulunan .zip dosyasında bulunan tekniğimin iki örneğini kodladım.

Çalışmasını sağlamak

Yani, size bir görsel vermek için, işte bir demo çalıştım.

Her satırın nasıl işaretlendiği aşağıda açıklanmıştır:

Project Title

Oradan çalışmak için gereken CSS yeterlidir:

// This container element gives us the scrollbars we want.div.horizontal {width: 100%;height: 400px;overflow: auto;}// table-layout: fixed does a lot of the magic, here. It makes sure that the "table cells" retain the pixel dimensions you want..table {display: table;table-layout: fixed;width: 100%;}// Arranging your content inside the "cells" is as simple as using the vertical-align and text-align properties. Floats work, too.article {width: 400px;height: 400px;display: table-cell;background: #e3e3e3;vertical-align: middle;text-align: center;}// Some styling for contrast.article:nth-child(2n+2){background: #d1d1d1;}

Bazı yatay yerleşim teknikleri, kap elemanının (bu durumda div.horizontal), içerdiği elemanların kombine genişliğine eşit bir tanımlı piksel genişliğine sahip olmasını gerektirir. Diğer teknikler ekran gerektirir: satır içi blok; Bu tekniğin hayranı değilim. Tablo hücresiyle, ihtiyaç duyduğunuz her zaman öğeleri eklemeye devam edin ve gitmek için iyi bir seçeneğiniz var - bir CMS ile kullanım için mükemmel.

Tam ekran yapmak

Tamam, diğer yatay düzen, tam ekran yatay düzendir. Bunu tablo hücresi özelliği ile oluşturmak, bazı JavaScript gerektirir. İşleri hızlandırmak için jQuery'yi kullandım. JS gereksinimi bu tekniği durumsal olarak daha kullanışlı hale getirebilir, ancak yine de havalıdır.

İşte çalışan bir demo.

İşaretleme benzer:

Full-Screen Horizontal Layouts
Made with display: table-cell;
  Ezequiel Bruni tarafından 

Ancak, burada, tarayıcı penceresinin boyutuna uyacak şekilde yapılmış bir "satır". Her

// Don't touch this part. It helps.html, body {width: 100%;height: 100%;overflow: hidden;}// In this case, I didn't want a scrollbar, so I used overflow: hidden. The container element is more essential than ever, though. The body element will not do.div.horizontal {display: block;width: 100%;height: 100%;overflow: hidden;position: static;}.table {display: table;table-layout: fixed;width: 100%;height: 100%;}.table > section {width: 1600px; // The width is based on my monitor. It's replaced by jQuery anyway. Percentage widths do not work.height: 100%;display: table-cell;background: #e3e3e3;vertical-align: middle;text-align: center;}

$(window).load(function() {var vWidth = $(window).width();var vHeight = $(window).height();$('.table > section').css('width', vWidth).css('height', vHeight);});$(window).resize(function() {var vWidth = $(window).width();var vHeight = $(window).height();$('.table > section').css('width', vWidth).css('height', vHeight);});