html - CSS div 相对于其他 div 的定位

Question

我正在创建一个时间线提要，其中有两个元素:一个图标和一些文本。图标和文本都包含在另一个 div 中。我的目标是这样设置，以便当我写一个最终环绕的句子时，只在文字下方而不是实际图标下方，这样它就会整齐且有组织。

这是代码:

  <div id="right_column" class="large-3 columns">
  <h2>Saved Content</h2>
    <div class="content">
      <div class="content_item">
        <div class="content_icon"><i class="ss-icon">doc</i></div>
        <div class="content_text">How to Retain Good Employees</div><br>
      </div>
    <div class="content_item">
      <div class="content_icon"><i class="ss-icon">video</i></div>
      <div class="content_text">Do I really Need a Team? Ask these 6 questions</div><br>
    </div>
  </div>

这是CSS:

.content_item {
  color: blue;
 }

.content_item div {
  display: inline;
 }

这是我得到的结果，但我不希望“问题”一词位于图标下方，而只是文字下方。

Answer 1

试试这个:

.content_item div {
  display: inline-block;
 }

和

.content_text{
  float: right; /* or left */
  width: 80%; /* set yout text container width*/
}

如果不起作用，请发布您之前发布结果的屏幕截图，我可以快速帮助您