将视图div对齐
[英]Aligning views div to right
问题描述
I want to align the views div to the right side of the question-card block and left of the `ago div. 
我想将views div对齐到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; }
<!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>
Thank you. 谢谢。 ` `
5 个解决方案
解决方案1
5 已采纳 2016-11-10 07:56:12
You have div with css: display: flex; 你有div与css： display: flex; so you can use these properties in appropriate places: 所以你可以在适当的地方使用这些属性：
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; }
<!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>
解决方案2
2 2016-11-10 07:58:22
You can use full-fledged CSS Flexbox . 您可以使用功能齐全的CSS Flexbox 。 Structure your .profile a little bit differently. 构建你的.profile有点不同。
Have a look at the snippet below: 看看下面的代码：
.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; }
<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>
Hope this helps! 希望这可以帮助！
解决方案3
1 2016-11-10 07:45:36
Just make the postion:relative for the profile class , so it's content (which have position:absolute ) can be placed as you want inside this last : 只需为profile类创建postion:relative ，所以它的内容（有position:absolute ）可以在最后一个中放置：
.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 */ }
<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>
解决方案4
1 2016-11-10 07:48:29
FOR UPDATE QUESTION :: 更新问题::
Just change some CS Style: 只需更改一些CS样式：
LIVE LINK 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>
解决方案5
1 2016-11-10 07:53: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; } .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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
将DIV右对齐 - Aligning DIV to the right
将Div对准右下角 - Aligning Div to the bottom right
右对齐div - Right aligning a div
将图像对齐到div的右侧 - Aligning an image to the right side of a div
图片与div的右侧不对齐 - image not aligning with right side of the div
Div内容从左到右对齐？ - Div contents are aligning left to right?
将一个 div 对齐到另一个 div 的右侧 - Aligning a div to the right side of another div
右对齐div与左对齐div内联？ - Right aligning div inline with a left aligned div?
将居中的Div与其直接右对齐的Div对齐 - Aligning a Centered Div with a Div to its Immediate Right
以最大宽度div右对齐图像 - Right aligning image in max-width div
相关标签