将内容放入带有图标的列中

Question

当我关注另一个 example 时，我发现它对我的情况不起作用。我使用了一个 Font Awesome 图标，它以某种方式干扰了我的 CSS。

我应该采取什么步骤使文本段落从左边框和图标缩进（以像素为单位）？

在这种情况下不起作用的建议解决方案：

#left {
    float:left;
    width:7px;
}
#right {
    width: 100%;
}

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">

<div style="width:200px"><i class="fa fa-caret-up" id="left" style="display:block;vertical-align: top;margin-top:3px"></i><span id="right" style="margin-left: 0px;display:block">A long description adjacent to the input field that doesn't fit into one line and it has to be broken into multiple lines.</span>
</div>

Answer 1

您可以在包含的 div 元素上使用正 margin-left，在子 img 上使用负 margin-left 将其移动到文本的左侧，像这样：

div {
  width: 200px;
  text-align: justify;
  margin-left: 20px;
}
div .fa {
  float: left;
  width: 10px;
  margin: 3px 0 0 -15px;
}

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">

<div>
  <i class="fa fa-caret-up"></i>
  A long description adjacent to the input field that doesn't fit into one line and it has to be broken into multiple lines.
</div>

Answer 2

有几种方法可以实现这一点，Rory 已经向您展示了一种。另一种方法是将 relative 的 position property 值添加到 main（父元素），如下所示，然后将 absolute 的 position property 值添加到 .fa。这样你就可以使用 left 和 negative value 来根据需要定位它。

注意：要让文字环绕图标，只需将 .fa 浮动到左侧，然后使用 margins 调整图标之间的间距和文本。

.main {  
  width: 200px;
  margin-left: 50px;
  position: relative;
  }


.fa {
  position: absolute;
  left: -25px;
  }

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">

<div class="main"><i class="fa fa-caret-up"></i><span style="margin-left: 0px;display:block;width:100%">A long description adjacent to the input field that doesn't fit into one line and it has to be broken into multiple lines.</span>
</div>

将内容放入带有图标的列中

Fitting content into a column with icon

javascript

html

css

twitter-bootstrap

font-awesome