问题描述
如何使日期/时间位于用户名旁边?
<li class="comment">
<div class="username">sundar</div><!-- element 1-->
<span class="createdAt">2019-01-03 12:30:20</span>
<div class="content">code Now! #work #hard</div><br>
</li>
解决方法
嘿,使用Flexbox可以轻松做到这一点。
如果您想了解有关此CSS属性的更多信息:MDN Flexbox或CSS Tricks Flexbox Sheet
以下是一个小提琴示例:
.comment{
/* flex-styles */
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
/* additional | not needed */
background: black;
border-radius: 4px;
padding: 20px;
max-width: 400px;
}
.comment .column{
display: flex;
flex-direction: column;
}
/* additional | not needed */
.comment span{ color: white; }
<li class="comment">
<div class="column">
<span class="username">sundar</span>
<span class="content">code now! #work #hard</span>
</div>
<div class="column">
<span class="createdAt">2019-01-03 12:30:20</span>
</div>
</li>
,
使用.username
将div .username { display: inline-block; }
更改为行内块。您可以使用float然后将日期推到右侧。弹性框可能是一种现代方法,但需要更改HTML结构。
.username {
display: inline-block;
}
.createdAt {
float: right;
}
<li class="comment">
<div class="username">sundar</div><!-- element 1-->
<span class="createdAt">2019-01-03 12:30:20</span>
<div class="content">code now! #work #hard</div><br>
</li>
,
使用弹性盒
<li class="comment">
<div style="display:flex;flex-direction:row;justify-content:space-between">
<div class="username" style="float:left">sundar</div><!-- element 1-->
<span class="createdAt">2019-01-03 12:30:20</span>
</div>
<div class="content">code now! #work #hard</div><br>
</li>
这是一个example
,您可以在要与包装器位于同一行的元素周围使用div。 比使用Flexbox在整个宽度上分隔内容。
此外,您可以使用HTML样式属性在HTML中包含CSS,也可以使用单独的CSS文件进行样式设计。
<div class="comment" style="width:300px; background: #CFEBF7; padding:20px; font-family:sans-serif;">
<div class='wrapper' style="display:flex; justify-content: space-between;">
<span class="username"><strong>Sundar</strong></span>
<span class="createdAt">2019-01-03 12:30:20</span>
</div>
<div class="content">code now! #work #hard</div><br>
</div>
编辑:更改了背景颜色,字体并添加了填充以更准确地反映示例。