it-swarm.com.de

Wie kann ich ein Float-Top mit CSS erstellen?

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

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

Mit diesem Code wird jedes div nach links verschoben, bis das rechte Limit der Seite erreicht ist. Ich möchte dasselbe tun, aber vertikal, so dass jedes div am unteren Ende der vorherigen platziert wird. Wenn das untere Limit der Seite erreicht ist, wird eine neue Spalte erstellt. Gibt es eine Möglichkeit, dies nur mit CSS zu tun (und möglicherweise den HTML-Code zu bearbeiten)?

63
mck89

Die einzige Möglichkeit, dies nur mit CSS zu tun, ist die Verwendung von CSS 3, das nicht für jeden Browser geeignet ist (nur die neueste Generation wie FF 3.5, Opera, Safari, Chrome).

In CSS 3 gibt es tatsächlich eine fantastische Eigenschaft: Spaltenanzahl, die Sie wie folgt verwenden können:

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

Wenn #myContent Ihre anderen Divs einschließt.

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

Wie Sie dort lesen können, gibt es gravierende Einschränkungen bei der Verwendung. Im obigen Beispiel wird die Spalte nur dann zusammengefügt, wenn der Inhalt überläuft. In Mozilla können Sie die Eigenschaft column-width verwenden, mit der Sie den Inhalt in beliebig viele Spalten aufteilen können.

Ansonsten müssen Sie den Inhalt zwischen verschiedenen Divs in Javascript oder im Backend verteilen.

27

Verwenden Sie einfach vertical-align:

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

Hugogi Raudel hat einen interessanten Weg gefunden, um dies durch CSS zu erreichen. Angenommen, hier ist unsere HTML-Auszeichnung:

<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>

Mit diesem CSS-Code können Sie eine dreizeilige Spalte erstellen:

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

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

Und hier ist das Endergebnis:
enter image description here
Was wir hier tun, ist das Hinzufügen eines angemessenen Randes für jedes Element in der Zeile. Diese Ansatzbeschränkung besteht darin, dass Sie die Anzahl der Spaltenzeilen ermitteln müssen. es wird nicht dynamisch sein. Ich bin mir sicher, dass es Anwendungsfälle gibt, also habe ich diese Lösung hier eingefügt. 

15
Arash Milani

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

Wenn Sie div untereinander anzeigen möchten, müssen Sie Folgendes tun:

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

Ich habe das nur zum Spaß ausprobiert - weil ich auch eine Lösung hätte.

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 */
}

Sie können sehen, dass dies mit größeren/breiteren Divs funktioniert. Ich muss nur seitwärts denken. Ich kann mir vorstellen, dass die Positionierung zum Thema werden wird. transform-Origin sollte einigen dabei helfen.

5
Ron

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

    <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 "Seitenumbruch innen: Vermeiden" bei P und Spaltenbreite bei BODY. Es kommt mit dynamischer Spaltenanzahl. Text in A kann mehrzeilig sein und Blöcke können unterschiedliche Höhen haben.

Vielleicht hat jemand etwas für Edge und IE

2
user6594402

Ich denke, der beste Weg, um das zu erreichen, worüber Sie sprechen, besteht darin, eine Reihe von Divs zu haben, die Ihre Spalten sind, und diese auf die von Ihnen beschriebene Weise zu füllen. Dann füllen Sie diese Divs vertikal mit dem Inhalt, über den Sie sprechen. 

2
iandisme
<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;}

Wenn die Anzahl der div-Elemente jedoch nicht festgelegt ist oder Sie nicht wissen, wie viel es sein könnte, benötigen Sie immer noch JS. Verwenden Sie jQuery :even, :odd

2
glazsasha

Um dies mit CSS3 zu erreichen, ist es nicht so schwer, solange ich Sie richtig verstehe. Nehmen wir an, die HTML-DIVs sehen folgendermaßen aus:

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

Und das CSS wäre wie folgt. Das folgende CSS bewirkt, dass Ihr DIV einen Float-Befehl nach links ausführt, der links vom Parent-DIV-Element angezeigt wird. Dann verwenden Sie "top: 0" und es wird "oben" im Browserfenster angezeigt.

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

Ich mache einfach mit JQuery.

Ich habe in Firefox und IE10 getestet.

In meinem Problem haben die Artikel 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>
2
Flavio Sousa

Der Trick, der für mich funktionierte, bestand darin, den Schreibmodus für die Dauer des Div-Alignments 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>

1
KarlsFriend

Möglicherweise können Sie etwas mit Geschwister-Selektoren machen, z. B .:

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

Ich habe es nicht ausprobiert, aber dies könnte dazu führen, dass das vierte Div links bleibt und vielleicht tut, was Sie wollen. Wieder nicht vollständig unterstützt.

0
matpol

Ich weiß, dass diese Frage alt ist. Aber jeder, der es heute tun möchte, hier.

div.floatablediv{
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	column-break-inside: avoid;
}
div.floatcontainer{
  -webkit-column-count: 2;
	-webkit-column-gap: 1px;
	-webkit-column-fill: auto;
	-moz-column-count: 2;
	-moz-column-gap: 1px;
	-moz-column-fill: auto;
	column-count: 2;
	column-gap: 1px;
	column-fill: auto;
}
<div style="background-color: #ccc; width: 100px;" class="floatcontainer">
  <div style="height: 50px; width: 50px; background-color: #ff0000;" class="floatablediv">
  </div>
    <div style="height: 70px; width: 50px; background-color: #00ff00;" class="floatablediv">  
  </div>
    <div style="height: 30px; width: 50px; background-color: #0000ff;" class="floatablediv">  
  </div>
    <div style="height: 40px; width: 50px; background-color: #ffff00;" class="floatablediv">  
  </div>
  <div style="clear:both;"></div>
</div>

0
aBetterGamer

Dies funktioniert, gilt in ul:

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