如何通过css内联属性在一行中显示两个div（类）答案

【问题标题】：How can I display two div(class) in one line via css inline property如何通过css内联属性在一行中显示两个div（类）
【发布时间】：2020-11-11 15:17:34
【问题描述】：

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

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

【问题讨论】：

标签： html css class date

【解决方案1】：

嘿，这很容易用 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>

【讨论】：

因为这个问题的作者已经发送了一个示例，该示例显示这两行不仅彼此相邻，而且还具有相当大的空间。 Flexbox 是行业标准。 'display: inline-block' 在这里根本不够用。
当然可以，请看我的示例，您根本不需要更改 HTML 代码。我知道带有 CSS-Grid 的弹性盒子是标准。但是使用替代方法 > 改变 HTML 结构
老兄，我不想太苛刻。 2020 年没有人再使用“浮动”了。它已经过时并在网格管理的几个状态中导致错误。浮动将在未来成为弃用的功能。

【解决方案2】：

将 div .username 更改为带有 .username { display: inline-block; } 的内联块。您可以使用 float 然后将日期推到右侧。 Flexbox 可能是一种现代方式，但需要更改 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>

【讨论】：

【解决方案3】：

使用弹性盒子

<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

【讨论】：

【解决方案4】：

您可以使用 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>

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

【讨论】：