CSSの要素を右に揃える

agoクラスを親div（cardクラス）の右側に揃えたいとします。CSSの要素を右に揃える

しかしfloat: rightはここ

がそれのコードスニペットである:(機能していません。

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

あなただけに必要なヘルプをありがとう

出典

2016-11-08 IamNOOB

。コードに少し変更を加えてください

1）inline-flexを使用しているため、meta-info divのコンテンツの幅は、コンテナの幅全体ではなく、&です。したがって、は、行幅全体を占有する代わりにdisplay: flex;を使用します。

2）次に、は、.agoのみを右に水平に整列します。あなたは助けを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>

出典

2016-11-08 15:26:31

ありがとうの男:) – IamNOOB

乾杯のバディでフレックスを使用していることを実行します:) –

答えて

関連する問題