Horizontale Webseite in WebKit

Ich versuche eine Webseite zu erstellen, die ähnlich wie "The Horizontal Way" ist. Das Ziel besteht darin, dass alle Containerkästen horizontal und nicht vertikal fallen, ohne die Breite des Körpers festzulegen.Horizontale Webseite in WebKit

Bellow ist eine grundlegende Version meiner Seite. Ich habe auch mit der Idee experimentiert, den Körper um 90 Grad zu drehen, stieß aber schnell auf Grenzen.

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 
      * { 
       -webkit-box-sizing: border-box; 
      } 
      body { 
       position: absolute; 
       top: 0; 
       bottom: 0; 
       width: 4000px; 
      } 
      .box { 
       display: inline-block; 
       height: 99%; 
       width: 300px; 
       margin: 5px; 
       border: 1px solid #000; 
       background-color: #FBF; 
       -webkit-transition: all 500ms linear; 
      } 
      .box:hover { 
       width: 600px; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="box">One</div> 
     <div class="box">Two</div> 
     <div class="box">Three</div> 
    </body> 
</html>

Ich bin nicht mit der Kompatibilität mit anderen Browsern betroffen, aber es muss in rescent Versionen von WebKit (Safari 5, Chrome 9, etc.) arbeiten.

bearbeiten: Beim Betrachten der Basis stylesheet for webkit hatte ich die Eigenschaft "-webkit-Block-Flow" gestoßen. Ich konnte nicht viele Informationen dazu finden, aber es könnte mir das Verhalten geben, nach dem ich suche.

Quelle

2011-01-15 George Marshall

Es ist hilfreich, wenn Sie das Problem angeben, das Sie mit Ihrem aktuellen Code haben. – Duopixel

Ich versuche den obigen Effekt zu erreichen ** ohne ** eine Körperbreite einzustellen. –

Mit dem Display-Typ -webkit-box konnte ich genau das erreichen, was ich suchte. Ich habe den überarbeiteten Code veröffentlicht.

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 
      * { 
       -webkit-box-sizing: border-box; 
      } 
      body { 
       display: -webkit-box; 
       -webkit-box-orient: horizontal; 
       position: absolute; 
       top: 0; 
       bottom: 0; 
      } 
      .box { 
       width: 300px; 
       margin: 5px; 
       border: 1px solid #000; 
       background-color: #FBF; 
       -webkit-transition: all 500ms linear; 
      } 
      .box:hover { 
       width: 600px; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="box">One</div> 
     <div class="box">Two</div> 
     <div class="box">Three</div> 
    </body> 
</html>

Quelle

2011-01-28 01:37:16

Für mich scheint die einfachste Lösung eine ungeordnete Liste mit Listenelementen zu sein, die den Text/Inhalt des Textes enthalten.

Quelle

2011-01-15 00:30:12

Das ändert nicht das Überlaufverhalten, das ich suche. –

Horizontale Webseite in WebKit

Antwort

Verwandte Themen