我想将ago类与父div（card类）的右侧对齐。
但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>
感谢您的帮助。
答案 0 :(得分：0)
您只需对代码进行一些小的更改
1）由于您使用了<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table table-bordered table-hover">
<tr>
<td colspan="3" class="btn-warning">
<?php echo validation_errors(); ?>
</td>
<tr>
<?php echo form_open( 'widget/assign'); ?>
<tr>
<td colspan="3">
<div class="form-group">
<select class="form-control" name="widgetlist" id="widgetnum">
</select>
</div>
</td>
</tr>
<tr>
<td colspan="3">
<div class="form-group">
<select class="form-control" placeholder="Site:" name="site" id="site">
</div>
</td>
</tr>
<tr>
<td colspan="3">
<input class="form-control" type="input" placeholder="Location" name="location" />
</td>
</tr>
<tr>
<td colspan="3">
<input class="form-control" type="input" placeholder="Department" name="department" />
</td>
</tr>
<tr id="listofnames">
<td>
<input class="form-control widgetname" type="input" placeholder="First Name" name="fname" />
</td>
<td>
<input class="form-control" type="input" placeholder="Last Name" name="lname" />
</td>
<td>
<button id='addname' type="button" class="btn btn-info btn-circle"><i class="fa fa-plus"></i>
</button>
</td>
</tr>
<tr id="tcsection">
<td colspan="3"> </td>
</tr>
</table>
<table class="table table-bordered table-hover">
<tr>
<td colspan="5">
<h2>TC</h2>
</td>
</tr>
<tr id="tcs">
<td>
<input class="form-control starttc" type="input" placeholder="UTC Start Time (format 00:00:00)" name="starttime" />
</td>
<td>
<input class="form-control" type="input" placeholder="UTC End Time (format 00:00:00)" name="endtime" />
</td>
<td>
<input class="form-control" type="input" placeholder="Extension" name="extension" />
</td>
<td>
<input class="form-control" type="input" placeholder="Domain" name="domain" />
</td>
<td>
<button id='addtc' type="button" class="btn btn-success btn-circle"><i class="fa fa-plus"></i>
</button>
</td>
</tr>
<tr id="submitbtnsection">
<td colspan="5">
<input type="submit" name="submit" class="btn btn-primary" value="Assign Widget" />
</td>
</tr>
</form>
</table>，因此inline-flex div只占用其内容的宽度＆amp;不是它的容器的整个宽度。因此，使用meta-info 代替占据整个行宽。
2）接下来水平对齐仅display: flex;向右。你可以使用flex .ago
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;
}