在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到右邊。你這樣做使用Flex由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

乾杯好友:) –

在css中將元素向右對齊

回答

相關問題