Wie richtet man ein Div links / rechts aus, ohne float zu verwenden?

75

Wenn Sie so etwas tun: 

<div style="float: left;">Left Div</div>
<div style="float: right;">Right Div</div>

Ich muss ein leeres div mit verwenden 

clear: both;

das fühlt sich sehr schmutzig für mich an.

Gibt es also eine Möglichkeit, ohne Float auszurichten?

Hier ist mein Code:

.action_buttons_header a.green_button{
 
}
<div class="change_requests_container" style="width:950px !important">
    <div class="sidebar">
        
            
                <a href="/view/preview_unpublished_revision/422?klass=Proposal" class="preview sidebar_button_large action_button" name="preview" onclick="window.open(this.href);return false;">Preview New Version</a>
            
        
        
    </div>
    <div class="content_container">
        <div class="content">
                        
                <div class="action_buttons_header">
                    <a href="/changes/merge_changes/422" class="re_publish publish green_button" style="
    margin: 5px 0px 5px auto;
">Apply Changes</a>
                </div>
            
            


            <div id="change_list_container">    

<div class="changes_table">
    
        
            
            <style type="text/css">
                #original_492 .rl_inline_added {
                    display: none;
                }
                
                #492.change_container .actial_suggested_text_container{
                    display: none;
                }
            </style>
            <div class="content_section_header_container">
                <div class="content_section_header">
                    <a href="#" class="collapse" name="492"></a>
                    The Zerg | 
                    Overview
                    <div class="status" id="492_status">
                        <div id="492_status_placeholder">
                            
                        </div>
                    </div>
                </div>
            </div>
            <div class="change_container" id="492">
                
            </div>
        </div>
    </div>
</div>
Erweitern Sie das Snippet

Ich möchte den grünen Knopf rechts neben der horizontalen Leiste, in der er sich befindet, aber auf die sauberste Art und Weise.

Ich versuche nur zu lernen, wie man CSS elegant, sauber usw. macht.

html  css 
— NullVoxPopuli
quelle
Wenn Sie nur versuchen, das Leere zu beseitigen div, könnten Sie eine klare Lösung verwenden class
— Danferth

Antworten:

58

Wenn Sie in diesem Fall die grüne Schaltfläche rechts ausrichten möchten, ändern Sie einfach das eine Div, damit alles richtig ausgerichtet ist:

<div class="action_buttons_header" style="text-align: right;">

Das div nimmt bereits die gesamte Breite dieses Abschnitts ein. Verschieben Sie also einfach die grüne Schaltfläche nach rechts, indem Sie den Text nach rechts ausrichten.

— DCNYAM
quelle
Ich habe es versucht ... und es funktioniert in Ordnung ... aber die Schaltfläche hat keinen vertikalen Rand, um sie nach unten zu drücken, bis sie vertikal zentriert ist. Vielleicht ist etwas anderes das Problem jsfiddle.net/58pRG/2
— NullVoxPopuli
1
Zeilenhöhe hinzufügen: 38px; zur Header-Klasse: .action_buttons_header {text-align: right; Zeilenhöhe: 38px; }
— DCNYAM
63

Eine andere Möglichkeit, etwas Ähnliches zu tun, ist die Flexbox auf einem Wrapper-Element, d. H.

 .row {
        display: flex;
        justify-content: space-between;
    }
  <div class="row">
        <div>Left</div>
        <div>Right</div>
    </div>
Erweitern Sie das Snippet

— Myrcutio
quelle
3
Flex ist eine Anzeigeoption? Oo developer.mozilla.org/en-US/docs/Web/CSS/display WOAH. Es gibt so viele, seit ich das letzte Mal nachgesehen habe.
— NullVoxPopuli
1
Die Browserunterstützung ist ebenfalls ziemlich gut, obwohl Sie sie gelegentlich voranstellen müssen. Dies ist eine sehr gute Seite zum Lernen von Flex: flexboxfroggy.com
— myrcutio
1
@myrcutio Vielen Dank dafür. Habe genau das gemacht was ich brauchte und ist sehr sauber.
— woot
@myrcutio plus 1
— chris_r
Das ist brilliant!
— Sanjay Verma
18

Sie könnten Dinge wie verwenden display: inline-block aber ich denke, Sie müssten ein anderes Div einrichten, um es zu verschieben. Wenn links von der Schaltfläche nichts angezeigt wird, können Sie Ränder verwenden, um es an seinen Platz zu verschieben.

Alternativ, aber keine gute Lösung, können Sie Tags positionieren. Setzen Sie das umfassende div als position: relativeund dann das div der Schaltfläche alsposition: absolute; right: 0 , aber wie gesagt, dies ist wahrscheinlich nicht die beste Lösung

HTML

<div class="parent">
  <div>Left Div</div>
  <div class="right">Right Div</div>
</div>

CSS

.parent {
  position: relative;
}
.right {
    position: absolute;
    right: 0;
}
— Chris James Champeau
quelle
3
Ich finde das ehrlich gesagt die beste Lösung. Zeigen Sie den Block-Outter-Container an, um den Raum zu füllen, zeigen Sie den Inline-Block-Innencontainer an, um den Text nach rechts auszurichten, überspringen Sie alle Float-Kopfschmerzen und erhalten Sie trotzdem nette Dinge wie Rand und Polsterung.
— Andrew Hoffman
Ich mag (und upvoted) dies auch, aber in der Tat, hat Nachteile, ein ernstes , dass sein absolutewerden entfernen .rightvon den Abmessungen der Berechnung .parent, so im Falle es ist ein Behälter mit ähnlich absoluteGeschwisterelemente (zB in meinem Fall einige Fenstersteuer Widgets), dann wird .parent einfach zusammenbrechen, als ob es leer wäre.
— Gr.
12

Es ist schmutzig, benutze besser den overflow: hidden;Hack:

<div class="container">
  <div style="float: left;">Left Div</div>
  <div style="float: right;">Right Div</div>
</div>

.container { overflow: hidden; }

Oder wenn Sie ein paar ausgefallene CSS3-Schlagschatten-Sachen machen und Probleme mit der oben genannten Lösung bekommen:

http://web.archive.org/web/20120414135722/http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack

PS

Wenn Sie sauber gehen wollen, würde ich mich eher um dieses Inline-Javascript als um den overflow: hidden;Hack kümmern :)

— PeeHaa
quelle
warum muss es aber ein hack sein? Gibt es nicht einen richtigen, sauberen Weg, dies zu tun?
— NullVoxPopuli
@TheLindyHop nicht zuverlässig nein :-) Aber zumindest mit dem overflow: hiddenHack müssen Sie keine zusätzlichen (nicht semantischen) Elemente hinzufügen.
— PeeHaa
idk, ich werde ein bisschen rumspielen. Und was die Inline-JS betrifft, so ist die App, an der ich arbeite, sehr in Bearbeitung. Und es ist sehr modular, so dass es manchmal Inline-js geben muss, die ausgeführt werden, wenn eine Ajax-Ersetzung = D
— NullVoxPopuli
1
@ TheLindyHop das sind keine wirklichen Gründe, Inline-Js zu verwenden. Eigentlich gibt es keinen guten Grund, es jemals zu tun IMHO :-)
— PeeHaa
Ruby on Rails 'link_to und link_to_remote verwenden es = \
— NullVoxPopuli
6

Eine andere Lösung könnte etwa folgende sein (funktioniert abhängig von der Anzeigeeigenschaft Ihres Elements):

HTML:

<div class="left-align">Left</div>
<div class="right-align">Right</div>

CSS:

.left-align {
  margin-left: 0;
  margin-right: auto;
}
.right-align {
  margin-left: auto;
  margin-right: 0;
}
— Mickaël R.
quelle
Sehr coole Lösung und erfordert kein Wrapping-Element oder Hinzufügen von Stilen zum übergeordneten Element.
— xpy
"Funktioniert abhängig von der Anzeigeeigenschaft Ihres Elements" - in welcher Konfiguration funktioniert es? Ich nahm an, Eltern sind blockund Kinder sind inline-block... Aber dann tat es genauso wie ohne Rand (nicht überraschend).
— Gr.
3

Sie können einfach einen linken Rand mit einem Prozentsatz verwenden.

HTML

<div class="goleft">Left Div</div>
<div class="goright">Right Div</div>

CSS

.goright{
    margin-left:20%;
}
.goleft{
    margin-right:20%;
}

(Goleft ist das gleiche wie Standard, kann aber bei Bedarf umkehren)

Die Textausrichtung funktioniert nicht immer wie für Layoutoptionen vorgesehen, sondern hauptsächlich nur für Text. (Wird aber oft auch für Formularelemente verwendet).

Das Endergebnis davon hat einen ähnlichen Effekt wie ein Div mit float: right; und Breite: 80% eingestellt. Außer, es wird nicht wie ein Schwimmer zusammenklumpen. (Speichern der Standardanzeigeeigenschaften für die nachfolgenden Elemente).

— josh.thomson
quelle
2

Sehr nützliche Dinge haben sich heute in meinem Projekt beworben. Ein Div musste nach rechts ausgerichtet werden, ohne dass ein Floating angewendet wurde.

Durch das Anwenden von Code wurde mein Ziel erreicht:

.div {
  margin-right: 0px;
  margin-left: auto;
}
— Raphael
quelle
1

Es müssen keine zusätzlichen Elemente hinzugefügt werden. Während flexbox sehr nicht intuitive Eigenschaftsnamen verwendet, wenn Sie wissen, was es kann , werden Sie feststellen, dass Sie es ziemlich oft verwenden.

<div style="display: flex; justify-content: space-between;">
<span>Item Left</span>
<span>Item Right</span>
</div>

Planen Sie dies oft zu brauchen?

.align_between {display: flex; justify-content: space-between;}

Ich sehe andere Leute, die sekundäre Wörter an der primären Position verwenden, was die Informationshierarchie durcheinander bringt. Wenn Ausrichtung die primäre Aufgabe ist und rechts , links und / oder dazwischen die sekundäre Aufgabe , sollte die Klasse sein .align_outer, nicht so, .outer_align wie es beim vertikalen Scannen Ihres Codes sinnvoll ist:

.align_between {}
.align_left {}
.align_outer {}
.align_right {}

Gute Gewohnheiten im Laufe der Zeit ermöglichen es Ihnen, früher als später ins Bett zu gehen.

— John
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.