Wie lassen sich zwei Inline-Span-Elemente am besten links und rechts ohne Float ausrichten? - html, CSS

    <div class="recentactivitycontent" >
<span class="myh4 grey pull-left"><img src="/images/images/exampleuser.png" alt="user"/> Admin added one new member.</span>

<span class="myh4 pull-right"><img src="/images/images/clock.png" alt="clock"/> 3 min ago</span>
</div>

Hier ist das CSS

.recentactivitycontent span{
display: inline-block;
line-height: 60px;
vertical-align: middle;

}

Wie Sie hier im Bild sehen können, ist ein Eltern-Div mit zwei Span-Elementen im Inneren. Wenn Sie die Float-Eigenschaft verwenden, ist das Problem, dass sie nicht vertikal ausgerichtet bleiben.

Ich möchte eine Art wie text-align-Eigenschaft verwendenInline-Elemente genau ausrichten. Höhe = Zeilenhöhe mit Display: Inline-Block ist möglich, aber dann muss ich jedes Mal die height -Eigenschaft setzen, die ich nicht möchte.

Jeder Vorschlag willkommen ..

Antworten:

Probieren Sie dieses CSS über Flexbox aus

.recentactivitycontent {
display: flex;
justify-content: space-between;
align-items: center;
}

.recentactivitycontent .pull-left {
display: flex;
align-items: center;
}

Sie können flexbox verwenden

Ihr Container benötigt Anzeige: flex; align-items: zentrieren;

Dann müssen sich Ihre Kinder über den linken Rand ausrichten: auto (dies wird nach rechts ausgerichtet)

Oder Rand rechts: Auto - dies wird nach links ausgerichtet

Wie Ryans Beantworte diese:

.left, .right{
position: absolute
}

.left:{
left: 0
}

.right{
right: 0
}

Aber Sie müssen darüber nachdenken, sie in ein Elternteil mit der position von relative, fixed oder absolute.

Absolut positionierte Elemente in einem übergeordneten Element mitErwähnte Positionen können mit dem Elternelement verschoben werden, wenn Sie sie an einer bestimmten Position auf Ihrer Seite haben wollen, während absolut positionierte Elemente in einem Container ohne spezifisches Positionsattribut immer die anderen Elemente überlagern und eine Position relativ zu Ihrem Browserfenster haben.

Da hast du einen Weg gesucht mit text-alignEs gibt eine Eigenschaft text-align-last wodurch die Elemente zum fernen Ende ausgerichtet werden, wenn ihr Wert ist justify.

.main{
text-align-last: justify;
}

.child{
display: inline-block;
vertical-align: middle;
}

<div class="main">
<div class="child">hello</div>
<div class="child">hey</div>
</div>

Aber es hat noch nicht viele Browser-Unterstützung.

Sie können diese CSS verwenden, um die Bilder sowie den gesamten Inhalt so auszurichten, dass Sie sich dorthin bewegen können, wo Sie möchten.

Die Position: absolut macht Ihren Inhalt in einer festen Position, so dass Sie das innere Teil ganz einfach verschieben können.

.myh4{
position:absolute;
}
.pull-left{
left:0;
}
.pull-right{
right:0;
}