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*/
}

如果它不能用于发布您之前发布结果的屏幕截图，我可以帮助您快速

Answer 2

试试这个CSS：

.content_item {
 color: blue;
 display:block;
 }

.content_icon
{
  display: inline-block;
  width:20%;
}

.content_text
{
 display: inline-block;
 width:80%;
}

Answer 3

您将在白色空间css属性之后：http://www.w3schools.com/cssref/pr_text_white-space.asp

所以：

.content_text { white-space: nowrap; }