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

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>

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.

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.

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>

   

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

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

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

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

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

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.