我想将 views div 对齐到 question-card block 的右侧和 `ago div 的左侧。
.question-card{
margin-left: 20px;
background: rgb(255, 255, 255);
-moz-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
-webkit-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 60%;
}
.circled-dp{
width: 40px;
height: 40px;
cursor: pointer;
border: 50%;
}
.profile{
padding: 5px;
display: flex;
}
.ago{
margin-left: auto;
}
.views{
float: right!important;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="post.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<title>Post</title>
</head>
<body>
<div class="question-card">
<img class="img" src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" width="100%">
<div class="profile">
<img class="circled-dp" src="https://drslash.com/wp-content/uploads/2014/11/Android-Studio.png">
<p class="profile-name">Someone</p>
<div class="views"><i class="fa fa-eye" aria-hidden="true"></i><span>100</span></div>
<p class="ago">17-nov-2016</p>
</div>
<hr>
<br>
</div>
</body>
</html>谢谢。 `
最佳答案
你有 div 和 css: display: flex; 所以你可以在适当的地方使用这些属性:
justify-content: space-between;
对齐元素:居中；
.question-card{
margin-left: 20px;
background: rgb(255, 255, 255);
-moz-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
-webkit-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 60%;
}
.circled-dp{
width: 40px;
height: 40px;
cursor: pointer;
border: 50%;
}
.profile{
padding: 5px;
display: flex;
justify-content: space-between;
}
.flex {
display: flex;
align-items: center;
}
.ago{
margin-left: auto;
}
.views{
}
span{
padding: 10px;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="post.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<title>Post</title>
</head>
<body>
<div class="question-card">
<img class="img" src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" width="100%">
<div class="profile">
<div class="flex">
<img class="circled-dp" src="https://drslash.com/wp-content/uploads/2014/11/Android-Studio.png">
<p class="profile-name">Someone</p>
</div>
<div class="views flex">
<i class="fa fa-eye" aria-hidden="true"></i>
<span>100</span>
<p class="ago">17-nov-2016</p>
</div>
</div>
<hr>
<br>
</div>
</body>
</html>关于html - 将 View div 右对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40522208/