将视图div对齐

Question

将视图div对齐

我想将viewsdiv 对齐到question-card块的右侧和前一个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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

谢谢.`

Answer 1

Ark*_*kej 5

你有div与css:display: flex;所以你可以在适当的地方使用这些属性:

justify-content: space-between;

align-items: center;

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，10 月前
查看次数：	90 次
最近记录：	9 年，10 月前