如何通过css inline属性在一行中显示两个divclass

如何解决如何通过css inline属性在一行中显示两个divclass

如何使日期/时间位于用户名旁边？

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

编辑：更改了背景颜色，字体并添加了填充以更准确地反映示例。