将视图div对齐

时间：2016-11-10 07:35:44

标签： html css

我想将views div对齐到question-card块的右侧以及`之前div的左侧。

Layout Demo 

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

谢谢。 `

5 个答案:

答案 0 :(得分：5)

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

justify-content: space-between;

align-items: center;

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

您可以使用成熟的 CSS Flexbox 。以不同的方式构建您的.profile。

请看下面的代码段：

＆＃13;
＆＃13; 
.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: 80%;
}
.circled-dp{
  width: 40px;
  height: 40px;
  cursor: pointer;
  border: 50%;
}
.profile{
  padding: 5px;
  display: flex;
}
.ago{
  margin: 0 0 0 10px;
}

.element {
  flex: 1;
}

.left {
  display: flex;
  align-items: center;
}

.right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.profile-name {
  margin: 0 0 0 5px;
}
＆＃13; 
<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="element left">
  <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="element right">
  <div class="views"><i class="fa fa-eye" aria-hidden="true"></i><span>100</span></div>
  <p class="ago">17-nov-2016</p>
</div>
</div>
<hr>
<br>
</div>
＆＃13;
＆＃13;
＆＃13;

希望这有帮助！

答案 2 :(得分：1)

只需为postion:relative课程制作profile，就可以在最后一个内容中放置内容（包含position:absolute）：

＆＃13;
＆＃13; 
.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;
  position:relative;  /*position added */
}
.ago{
  margin-left: auto;
}
.views{
  position:absolute; /* added*/
  right:100px;
  padding-top:16px; /* added */
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="post.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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：1)

FOR UPDATE QUESTION ::

只需更改一些CS样式：
LIVE LINK 

.profile{
     padding: 5px;
    display: block;
    position: relative;
}
p.profile-name {
    display: inline-block;
    vertical-align: top;
}
.views {
    display: inline-block;
    position: absolute;
    right: 92px;
}
.views p {
      margin: 0;
}


.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: block;
    position: relative;
}
.ago {
  float:right;
margin-left: auto;
}
p.profile-name {
    display: inline-block;
    vertical-align: top;
}
.views {
    display: inline-block;
    position: absolute;
    right: 92px;
}
.views p {
      margin: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<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><p>100</p></div>    
<p class="ago">17-nov-2016</p>
</div>
<hr>
<br>
</div>

答案 4 :(得分：1)

enter image description here 

.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: 0;
  text-align: right;
 }
.views {
   display: flex;
   justify-content: end;
   margin-top: 6px;
   width: 100%;
 }
.view{
  float: left;
}
.profile-name {
   margin-left: 3px;
   margin-top: 7px;
}
 .view span {
   margin-right: 15px;
 }
<!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">
<div class="view"><i class="fa fa-eye" aria-hidden="true"></i><span>100</span></div>
<p class="ago">17-nov-2016</p>
</div>

</div>
<hr>
<br>
</div>
</body>
</html>

相关问题
最新问题