Float nach links und rechts

dieses Problem schon seit einiger Zeit, mich stört worden. So habe ich einige visuelle Beschreibungen meines Problems erstelltFloat nach links und rechts

Zuerst hier ist mein HTML-Struktur Ich habe 6 divs .. die ersten drei Schwimmer nach links und die letzten 3 Schwimmer rechts. Das letzte Bild zeigt das Ergebnis, das ich will, aber nicht scheinen kann. Kann jemand es mir hier

// EDIT hilft Leider heren meine HTML und CSS

<style> 
    .left { float:left; } 
    .right { float:right; } 
</style> 
<div id="container"> 
    <div class="left"></div> 
    <div class="left"></div> 
    <div class="left"></div> 
    <div class="right"></div> 
    <div class="right"></div> 
    <div class="right"></div> 
</div>

HINWEIS: Ich kippe links rechts links rechts links rechts Option, weil Im meine Daten von PHP über eine Abfrage bekommen In meiner Datenbank .. geht erste Abfrage links zweite Abfrage geht nach rechts .... dank ein paar

/EDIT

This is a mocukup of my HTML structure

My f loats führen in diesem

this is my current result

Dies ist, was ich

wollen

I want this

Quelle

2012-06-12 Oldenborg

Bitte geben Sie Ihren Code ... –

+1 für die schönen Bilder, -1 für keine Markup oder CSS überhaupt in der Frage! –

eine links, eine rechts –

Sie können CSS3 column-count Eigenschaft dafür verwenden. Schreiben wie folgt aus:

.parent{ 
    -moz-column-count: 2; 
    -moz-column-gap: 50%; 
    -webkit-column-count: 2; 
    -webkit-column-gap: 50%; 
    column-count: 2; 
    column-gap: 50%; 
} 
.parent div{ 
    width:50px; 
    height:50px; 
    margin:10px; 
} 
.left{ 
    background:red; 
} 
.right{ 
    background:green; 
}

prüfen dieses http://jsfiddle.net/UaFFP/6/

Quelle

2012-06-12 10:48:08 sandeep

Es ist nützlich, die Browser-Unterstützung zu erwähnen, wenn Sie mit CSS3-Spalten antworten: http://caniuse.com/multicolumn. Zum Beispiel wird dies in IE9 nicht funktionieren, was viele Leute unterstützen müssen. – thirtydot

Das war genau was ich gesucht habe. Aber ich brauche Unterstützung für ie7 und höher. Also es ist nicht ganz brauchbar .. aber Sie haben die richtige Idee, wie die meisten Leute nicht. Also vielen Dank. – Oldenborg

Für IE können Sie diese JS verwenden http://www.csscripting.com/css-multi-column/ – sandeep

die erste Straße links div hinzufügen, dann die erste Straße rechts div und nach ihnen hinzufügen <br style="clear:both"> und den Vorgang wiederholen.

bearbeiten: Hier ist eine aktualisierte Antwort:

<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div> 
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div> 
<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div> 
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div> 
<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div> 
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div>

Quelle

2012-06-12 10:12:59

Entschuldigung, das ist keine Option – Oldenborg

Warum? Sie können die **
** haben absolut keine visuelle Darstellung. –

Ich arbeite an einem Projekt, wo ich nur Zugriff auf die CSS-Dateien habe .. alles andere ist offline – Oldenborg

Float eine links, eine rechts, und geben zuerst die clear: both Eigenschaft

<div class="left clear"></div> 
<div class="right"></div> 
<div class="left clear"></div> 
<div class="right"></div>

css

.left {float:left} 
.right {float:right} 
.clear {clear:both}

Example

Quelle

2012-06-12 10:14:59

@jacktheripper: gut, du hast es vor mir getan –

Angenommen, Sie ein anderes div in der Mitte von ihnen. Dann nutzen Sie diese chronologische Reihenfolge:

<div class="left"></div> 
<div class="right"></div> 
<div class="content"></div>

Oder wenn Sie es nicht tun, fügen Sie einfach ein anderes div, die einen Stil clear:both es schaffen.

Quelle

2012-06-12 10:15:31

Klasse nicht ID;) –

oh, ja. Danke @khaled_webdev –

Die Reihenfolge der Elemente zu manipulieren ist auch keine gute Lösung. – crush

Mit dem: n-te-Kind-Selektor und das Clearing nach 2 divs:

div { 
    width: 50px; 
    height: 50px; 
    background-color: red; 
    float: left; 
} 
div:nth-child(2n) { 
    background-color: green; 
    float: right; 
}

Live example

Ansonsten diese ziemlich hacky Methode verwenden, die keine zusätzliche Markup erfordert:

div { 
    width: 50px; 
    height: 50px; 
    background-color: red; 
    float: left; 
} 
div:nth-child(n) { 
    clear: both; 
} 

div:nth-child(2n) { 
    background-color: green; 
    float: right; 
    margin-top: -50px; //match this to the div height 
}

Live example

Quelle

2012-06-12 10:19:47 jacktheripper

Ich habe versucht, es ein bisschen zu modden, aber es scheint nicht richtig zu sein. Hier ist, wo ich bin, kann ich den HTML nicht berühren .. das ist behoben .. Ich kann nur mit dem CSS arbeiten [Live Beispiel] (http://jsfiddle.net/nSDcb/) – Oldenborg

<style type="text/css"> 

.parent {width:50px; border:1px solid red;} 

.left {float:left; } 

.right{float:right;} 

.child{height:50px;width:50px;border:solid 1px green;margin:0 0 10px 0;} 

</style> 

<body> 

<div class="left parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

<div class="right parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

</body> 

</html>

Geist es seltsam, wäre keine zentrale DIV zu haben, wenn dies der Fall ist die Mutter DIVs links schweben, bei sagen Breite von 20% 60% 20%.

Quelle

2012-06-12 10:30:40 bdede

Ich hätte dies getan, aber ich bin angewiesen Um den HTML-Code nicht zu ändern, kann ich nur das CSS ändern. – Oldenborg

HTML:

<div class="leftcolums"> 
    <div class="left">1</div> 
    <div class="left">2</div> 
    <div class="left">3</div>  
</div> 
<div class="rightcolums"> 
    <div class="right">4</div> 
    <div class="right">5</div> 
    <div class="right">6</div> 
</div> 
<div class="clear"></div>

STYLES:

.leftcolums{float:left;} 
.rightcolums{float:right;} 
.clear{clear:both;}

Quelle

2014-02-15 21:43:06

column-count wird bereits in großem Umfang unterstützt - http://caniuse.com/#feat=multicolumn Also, wenn alte Browser doesn‘ t stören Sie denken, mit i t.

Quelle

2016-01-30 18:18:40 Vlad

Und was machen Sie damit (um das OP-Problem zu lösen)? – dakab

Ich möchte gerne wissen, 3 Jahre später: D – Oldenborg

Float nach links und rechts

Antwort

Verwandte Themen