Ausrichten eines Elements nach rechts in css

Ich möchte die ago Klasse auf der rechten Seite des übergeordneten div (card Klasse) ausrichten.Ausrichten eines Elements nach rechts in css

Aber float: right nicht :(

Hier arbeiten ist der Code-Schnipsel davon.

.card{ 
 
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); 
 
    transition: 0.3s; 
 
    width: 80%; 
 

 
    max-height: 700px; 
 
} 
 
.card:hover{ 
 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); 
 
} 
 
.container{ 
 
    position: relative; 
 
    padding: 2px 16px; 
 
} 
 
.circled-dp{ 
 
    width: 40px; 
 
    height: 40px; 
 

 
} 
 
.meta-info{ 
 
    box-shadow: 0px 10px 0px 0px rgba(0,0,0,0.2); 
 
    padding: 2px; 
 
    display: inline-flex; 
 

 
} 
 
.name-card{ 
 
    margin-bottom: -9px; 
 
    position: relative; 
 
    margin-top: 10px; 
 
    padding-left: 2px; 
 
} 
 
.meta-info p{ 
 
    margin-bottom: -9px; 
 
    position: relative; 
 
    margin-top: 10px; 
 
    padding-left: 6px; 
 
} 
 
.ago{ 
 

 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Card</title> 
 
    <link rel="stylesheet" href="card.css"> 
 
</head> 
 

 
<body> 
 
    <div class="card"> 
 
     <div class="meta-info"> 
 
     <img class="circled-dp" src="https://inomics.com/sites/default/files/pictures/picture-95970-1460131169.png"> 
 
     <h4 class="name-card">Someone</h4> 
 
     <p> asked a question </p> 
 
     <div class="ago"> 
 
     <p >1 sec ago</p> 
 
    </div> 
 
     </div> 
 
     <img src="https://material-design.storage.googleapis.com/publish/material_v_4/social.png" style="width:100%;"> 
 
     <div class="container"> 
 
     <h4><b>Someone</b></h4> 
 
     <p> Question is here</p> 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

Vielen Dank für die Hilfe

Quelle

2016-11-08 IamNOOB

Sie müssen nur Machen Sie einige kleine Änderungen an Ihrem Code

1) Da Sie inline-flex verwendet haben, nimmt das meta-info div nur die Breite seines Inhalts & nicht die gesamte Breite seines Containers. Daher verwenden Sie stattdessen display: flex;, um die gesamte Zeilenbreite zu belegen.

2) Als nächstes horizontal ausrichten nur die .ago rechts. Sie tun das, indem margin-left: auto;

.card{ 
 
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); 
 
    transition: 0.3s; 
 
    width: 80%; 
 

 
    max-height: 700px; 
 
} 
 
.card:hover{ 
 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); 
 
} 
 
.container{ 
 
    position: relative; 
 
    padding: 2px 16px; 
 
} 
 
.circled-dp{ 
 
    width: 40px; 
 
    height: 40px; 
 

 
} 
 
.meta-info{ 
 
    box-shadow: 0px 10px 0px 0px rgba(0,0,0,0.2); 
 
    padding: 2px; 
 
    display: flex; 
 

 
} 
 
.name-card{ 
 
    margin-bottom: -9px; 
 
    position: relative; 
 
    margin-top: 10px; 
 
    padding-left: 2px; 
 
} 
 
.meta-info p{ 
 
    margin-bottom: -9px; 
 
    position: relative; 
 
    margin-top: 10px; 
 
    padding-left: 6px; 
 
} 
 
.ago{ 
 
    margin-left: auto; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Card</title> 
 
    <link rel="stylesheet" href="card.css"> 
 
</head> 
 

 
<body> 
 
    <div class="card"> 
 
     <div class="meta-info"> 
 
     <img class="circled-dp" src="https://inomics.com/sites/default/files/pictures/picture-95970-1460131169.png"> 
 
     <h4 class="name-card">Someone</h4> 
 
     <p> asked a question </p> 
 
     <div class="ago"> 
 
     <p>1 sec ago</p> 
 
     </div> 
 
     </div> 
 
     <img src="https://material-design.storage.googleapis.com/publish/material_v_4/social.png" style="width:100%;"> 
 
     <div class="container"> 
 
      <h4><b>Someone</b></h4> 
 
      <p> Question is here</p> 
 
     </div> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2016-11-08 15:26:31

Thanx Mann für die Hilfe :) – IamNOOB

Prost Buddy-flex mit :) –

Ausrichten eines Elements nach rechts in css

Antwort

Verwandte Themen