Zwei Elemente nebeneinander im äußeren div, eins linksseitig, eins rechtsseitig

Ich weiß, es gab viele ähnliche Fragen, aber ich konnte es nicht herausfinden.Zwei Elemente nebeneinander im äußeren div, eins linksseitig, eins rechtsseitig

Ich habe folgendes div:

#inputHeader { 
 
    width: 100%; 
 
    background: #30273a; 
 
    border-radius: 10px 10px 0px 0px; 
 
} 
 
#inputHeaderTitle { 
 
    color: white; 
 
    margin-left: 10px; 
 
    display: inline-block; 
 
} 
 
#inputHeaderEdit { 
 
    color: white; 
 
    display: inline-block; 
 
}

<div id="inputHeader"> 
 
    <p id="inputHeaderTitle">Header</p> 
 
    <span id="inputHeaderEdit" class="glyphicon glyphicon-pencil"></span> 
 
</div>

Ich mag die "inputHeaderTitle" auf der linken Seite des Div, und die "inputHeaderEdit" -span auf der rechten Seite. Wie kann ich das machen?

Edit:

ist hier ein jsfiddle: https://jsfiddle.net/9nuhay76/1, wo ich schwimmen war: links/rechts. Aber wenn ich das tue, bekommt der äußere DIV eine Höhe von 0px. Warum?

Quelle

2016-03-23 progNewbie

Float eine links und der andere rechts? – j08691

Schwimmer sollten nicht zum Positionieren verwendet werden, Sie sind mit Inline-Block an der richtigen Stelle. – DCdaz

#inputHeader { 
 
    width: 100%; 
 
    background: #30273a; 
 
    border-radius: 10px 10px 0px 0px; 
 
    display: flex; 
 
    align-items: center; 
 
    padding: 0 10px; 
 
    box-sizing: border-box; 
 
} 
 
#inputHeaderTitle { 
 
    color: white; 
 
    display: inline-block; 
 
    flex: 1; 
 
} 
 
#inputHeaderEdit { 
 
    color: white; 
 
    display: inline-block; 
 
}

<div id="inputHeader"> 
 
    <p id="inputHeaderTitle">Header</p> 
 
    <span id="inputHeaderEdit" class="glyphicon glyphicon-pencil">Edit</span> 
 
</div>

Quelle

2016-03-23 13:16:27

@progNewbie obwohl dies funktioniert müssen Sie daran denken, dass dies nicht wirklich auf IE unterstützt wird. – DCdaz

@DCdaz, flexbox funktioniert in IE10 und höher. aber brauchen richtige Präfixe ... Sie können Präfixe von [https://autoprefixer.github.io/] (http://autoprefixer.github.io/) bekommen –

Das ist weit entfernt von der Wahrheit. Es ist eine große Anzahl von Fehlern vorhanden, mit oder ohne dem Hersteller-Präfix. Die Tatsache, dass ein Hersteller-Präfix für eine aktuelle Version von IE benötigt wird, sollte alle Arten von Alarmglocken läuten. – DCdaz

<div id="inputHeader"> 
<p id="inputHeaderTitle" style="float:left">Header</p> 
<span id="inputHeaderEdit" style="float:right" class="glyphicon glyphicon- pencil"></span> 
</div>

Meinst du das?

Quelle

2016-03-23 13:07:39

Sie können Schwimmer hinzufügen: rechts So:

jsbin

Quelle

2016-03-23 13:14:00 ShacharW

Zunächst sollten Sie nicht Schwimmer für die Positionierung verwenden. Sie sind an der richtigen Stelle mit Display Inline-Block.

versuchen Sie stattdessen mit Display-Tabelle und dann Textausrichtung, um sie links oder rechts wie unten zu positionieren.

#inputHeader { 
 
    width: 100%; 
 
    background: #30273a; 
 
    border-radius: 10px 10px 0px 0px; 
 
} 
 
#inputHeaderTitle { 
 
    color: white; 
 
    margin-left: 10px; 
 
    display: inline-block; 
 
} 
 
#inputHeaderEdit { 
 
    color: white; 
 
    display: inline-block; 
 
} 
 

 
/* NEW */ 
 

 
.align-table { 
 
    display: table; 
 
    width: 100%; 
 
    table-layout: fixed; 
 
} 
 
.t-align { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
    width: 100%; 
 
} 
 
.align-center { 
 
    text-align: center; 
 
} 
 
.align-left { 
 
    text-align: left; 
 
} 
 
.align-right { 
 
    text-align: right; 
 
}

<div id="inputHeader" class="align-table"> 
 
    <div class="t-align"> 
 
    <p id="inputHeaderTitle">Header</p> 
 
    </div> 
 
    <div class="t-align align-right"> 
 
    <span id="inputHeaderEdit" class="glyphicon glyphicon-pencil"></span> 
 
    </div> 
 
</div>

Quelle

2016-03-23 13:17:27 DCdaz

Zwei Elemente nebeneinander im äußeren div, eins linksseitig, eins rechtsseitig

Antwort

Verwandte Themen