Wie kann ich einen Float-Top mit CSS erstellen?

Question

Ich weiß, dass CSS nur linke und rechte Werte für die Float-Eigenschaft unterstützt, aber gibt es eine Technik, um ein Floating-Top zu implementieren? Ich werde versuchen, es zu erklären. Ich habe den folgenden Code:

<div style="float:left"> 
<div style="float:left"> 
<div style="float:left"> 
.... 

Mit diesem Code jedes div bis die rechte Grenze der Seite nach links schwimmt erreicht ist. Ich möchte das Gleiche tun, aber vertikal, so dass jedes Div am Ende des vorherigen platziert wird und dann, wenn das untere Limit der Seite erreicht ist, eine neue Spalte erstellt wird. Gibt es eine Möglichkeit, dies nur mit CSS zu tun (und vielleicht den HTML-Code zu bearbeiten)?

Answer 1

Die einzige Möglichkeit, dies nur mit CSS zu tun, ist die Verwendung von CSS 3, die nicht bei jedem Browser funktioniert (nur die neueste Generation wie FF 3.5, Opera, Safari, Chrome).

Tat mit CSS 3 gibt es diese fantastische Eigenschaft: column-count, die Sie wie so verwenden können:

#myContent{ 
    column-count: 2; 
    column-gap: 20px; 
    height: 350px; 
} 

Wenn #myContent Ihre andere divs wickeln.

Mehr Infos hier: http://www.quirksmode.org/css/multicolumn.html

Wie Sie dort lesen können, gibt es erhebliche Einschränkungen dies bei der Verwendung. Im obigen Beispiel addiert es nur dann zu einer anderen Spalte, wenn der Inhalt überläuft. In Mozilla können Sie die Eigenschaft column-width verwenden, mit der Sie den Inhalt in so viele Spalten wie nötig aufteilen können.

Andernfalls müssen Sie den Inhalt zwischen verschiedenen divs in Javascript oder im Backend verteilen.

Answer 2

Es gibt keine float:top, nur float:left und float:right

Wenn Sie div untereinander angezeigt werden sollen möchten Sie tun haben:

<div style="float:left;clear:both"></div> 
<div style="float:left;clear:both"></div> 

Answer 3

Ich denke, der beste Weg, um zu erreichen, was du bist Sprechen darüber ist, eine Reihe von divs zu haben, die Ihre Spalten sein werden, und diese in der von Ihnen beschriebenen Weise zu bevölkern. Dann fülle diese Divs vertikal mit dem Inhalt, von dem du sprichst.

Answer 4

Sie vielleicht in der Lage, etwas mit Geschwistern Selektoren z.B .:

div + div + div + div{ 
float: left 
} 

Nicht versucht zu tun, aber dies könnte die vierte div schwimmt vielleicht links zu tun, was Sie wollen. Nochmals nicht vollständig unterstützt.

Answer 5

<div class="block blockLeft">...</div> 
<div class="block blockRight">...</div> 
<div class="block blockLeft">...</div> 
<div class="block blockRight">...</div> 
<div class="block blockLeft">...</div> 
<div class="block blockRight">...</div> 

block {width:300px;} 
blockLeft {float:left;} 
blockRight {float:right;} 

Aber wenn die Anzahl der Elemente des div nicht festgelegt ist oder Sie nicht wissen, wie viel es sein könnte, haben Sie immer JS brauchen. Verwenden Sie jQuery :even, :odd

Answer 6

Hugogi Raudel hat eine interessante Möglichkeit, um dies durch CSS zu erreichen kam.Hier nehme an ist unser HTML Markup:

<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
    <li>6</li> 
    <li>7</li> 
    <li>8</li> 
    <li>9</li> 
</ul> 

Sie können eine 3-reihige Spalte dieses CSS Code erreichen:

li:nth-child(3n+2){ 
    margin: 120px 0 0 -110px; 
} 

li:nth-child(3n+3) { 
    margin: 230px 0 0 -110px; 
} 

Und hier ist das Ergebnis:

Was wir tun, Hier fügen Sie für jedes Element in der Zeile einen geeigneten Rand hinzu. Diese Herangehensbeschränkung besteht darin, dass Sie die Anzahl der Spaltenzeilen bestimmen müssen. es wird nicht dynamisch sein. Ich bin sicher, es hat Anwendungsfälle, also habe ich diese Lösung hier aufgenommen.

• Hier ist eine Live-Demo: http://codepen.io/HugoGiraudel/pen/DoAIB
• Sie können blog post

Answer 7

ich dies für Spaß gerade versucht, die in Hugo mehr dazu lesen - da würde ich auch eine Lösung gefällt.

Geige: http://jsfiddle.net/4V4cD/1/

html:

<div id="container"> 
<div class="object"><div class="content">one</div></div> 
<div class="object"><div class="content">two</div></div> 
<div class="object"><div class="content">three</div></div> 
<div class="object"><div class="content">four</div></div> 
<div class="object tall"><div class="content">five</div></div> 
<div class="object"><div class="content">six</div></div> 
<div class="object"><div class="content">seven</div></div> 
<div class="object"><div class="content">eight</div></div> 
</div> 

css:

#container { 
width:300px; height:300px; border:1px solid blue; 
transform:rotate(90deg); 
-ms-transform:rotate(90deg); /* IE 9 */ 
-moz-transform:rotate(90deg); /* Firefox */ 
-webkit-transform:rotate(90deg); /* Safari and Chrome */ 
-o-transform:rotate(90deg); /* Opera */ 
} 
.object { 
float:left; 
width:96px; 
height:96px; 
margin:1px; 
border:1px solid red; 
position:relative; 
} 
.tall { 
width:196px; 
} 

.content { 
padding:0; 
margin:0; 
position:absolute; 
bottom:0; 
left:0; 
text-align:left; 
border:1px solid green; 
-webkit-transform-origin: 0 0; 
transform:rotate(-70deg); 
-ms-transform:rotate(-90deg); /* IE 9 */ 
-moz-transform:rotate(-90deg); /* Firefox */ 
-webkit-transform:rotate(-90deg); /* Safari and Chrome */ 
-o-transform:rotate(-90deg); /* Opera */ 
} 

Ich kann Sie sehen dies mit größer/breiter divs arbeiten. Ich muss nur seitwärts denken. Ich stelle mir vor, Positionierung wird zum Thema werden. Transform-Origin sollte etwas damit helfen.

Answer 8

Ich mache nur mit JQuery.

Ich habe in Firefox und IE10 getestet.

In meinem Problem haben die Elemente unterschiedliche Höhen.

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     .item { 
      border: 1px solid #FF0; 
      width: 100px; 
      position: relative; 
     } 
    </style> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
</head> 
<body> 
    <script> 
     function itemClicked(e) { 
      if (navigator.appName == 'Microsoft Internet Explorer') 
       e.removeNode(); 
      else 
       e.remove(); 
      reposition(); 
     } 

     function reposition() { 
      var px = 0; 
      var py = 0; 
      var margeY = 0; 
      var limitContainer = $('#divContainer').innerHeight(); 
      var voltaY=false; 

      $('#divContainer .item').each(function(key, value){ 
       var c = $(value); 

       if ((py+c.outerHeight()) > limitContainer) { 
        px+=100; 
        margeY-=py; 
        py=0; 
        voltaY=true; 
       } 

       c.animate({ 
        left:px+'px', 
        top:margeY+'px' 
       }); 

       voltaY=false; 
       py+=c.outerHeight(); 
      }); 
     } 

     function addItem() { 
      $('#divContainer').append('<div class="item" style="height: '+Math.floor(Math.random()*3+1)*20+'px;" onclick="itemClicked(this);"></div>'); 
      reposition(); 
     } 

    </script> 
    <div id="divMarge" style="height: 100px;"></div> 
    <div id="divContainer" style="height: 200px; border: 1px solid #F00;"> 
     <!--div class="item"></div--> 
    </div> 
    <div style="border: 1px solid #00F;"> 
     <input type="button" value="Add Item" onclick="addItem();" /> 
    </div> 
</body> 
</html> 

Answer 9

Um dies mit CSS3 zu erreichen, wird es nicht so schwer sein, solange ich Sie richtig verstehe. Lassen Sie uns sagen, dass die HTML DIV sieht wie folgt aus:

<div class="rightDIV"> 
    <p>Some content</p> 
<div> 
<!-- --> 
<div class="leftDIV"> 
    <p>Some content</p> 
</div> 

Und die CSS wäre wie folgt. Was das folgende CSS tun wird, ist, dass dein DIV einen Float nach links ausführt, der es links vom Eltern-DIV-Element "klebt". Dann verwenden Sie eine "top: 0", und es wird "kleben" oben im Browserfenster.

#rightDIV { 
     float: left 
     top: 0 
    } 
    #leftDIV { 
     float: right; 
     top: 0 
    } 

Answer 10

Verwenden Sie einfach vertical-align:

.className { 
    display: inline-block; 
    vertical-align: top; 
} 

Answer 11

Hier ist eine Lösung, die (nahezu perfekt) in FF arbeitet, Opera, Chrome:

<style> 
    html {height:100%} 
    p {page-break-inside:avoid;text-align:center; 
     width:128px;display:inline-block; 
     padding:2px;margin:2px;border:1px solid red; border-radius: 8px;} 
    a {display:block;text-decoration:none} 
    b {display:block;color:red} 
    body { 
     margin:0px;padding:1%; 
     height:97%; /* less than 98 b/c scroolbar */ 
     -webkit-column-width:138px; 
     -moz-column-width:138px; 
     column-width:138px; 
    } 
    </style> 

    <body> 
    <p><b>title 1</b> 
    <a>link 1</a> 
    <a>link 2</a> 
    <a>link 3</a> 
    <a>link 4</a> 
    </p> 

    <p><b>title 2</b> 
    <a>link 1</a> 
    <a>link 2</a> 
    <a>link 3</a> 
    <a>link 4</a> 
    <a>link 5</a> 
    </p> 

    </body> 

Der Trick ist, „page-Break- innen: Vermeiden Sie "auf P und Spaltenbreite auf BODY. Es kommt mit dynamischer Anzahl der Spalten. Text in A kann mehrzeilig sein und Blöcke können unterschiedliche Höhen haben.

Vielleicht hat jemand etwas für Kanten- und IE

Answer 12

Der Trick, der für mich gearbeitet wurde das Schreiben-Modus für die Dauer der div-Ausrichtung zu ändern.

.outer{ 
 
    /* Limit height of outer div so there has to be a line-break*/ 
 
    height:100px; 
 
    
 
    /* Tell the browser we are writing chinese. This makes everything that is text 
 
    top-bottom then left to right. */ 
 
    writing-mode:vertical-lr; 
 

 
} 
 

 
.outer > div{ 
 
    /* float:left behaves like float:top because this block is beeing aligned top-bottom first 
 
    */ 
 
    float:left; 
 
    width:40px; 
 
    
 
    /* Switch back to normal writing mode. If you leave this out, everything inside the 
 
    div will also be top-bottom. */ 
 
    writing-mode:horizontal-tb; 
 

 
}

<div class="outer"> 
 
    <div>one</div> 
 
    <div>two</div> 
 
    <div>three</div> 
 
    <div>four</div> 
 
    <div>one</div> 
 
    <div>two</div> 
 
    <div>three</div> 
 
    <div>four</div> 
 
    <div>one</div> 
 
    <div>two</div> 
 
    <div>three</div> 
 
    <div>four</div> 
 
</div>

Answer 13

Dies funktioniert, gelten in ul:

display:flex; 
flex-direction:column; 
flex-wrap:wrap;