清除小图标右侧的三个文本元素，不包装

Question

我想浮动三个文本项右侧的左浮动图标小于文本项，没有文本项包装。

div {
    width:30%;
}
div i {
    margin-right:0.75em; 
    padding:0.5em;
    float:left;
    color:#fff;
    border-radius:50%;
    clear:both;
    background:rgb(255,143,69);
}
h3 {
    margin-bottom:0.75em;
}
p {
    margin-bottom:2.75em; 
    overflow:auto;
}
a {
    font-size:0.9em;
    color:#ff8f45; 
} 

如你所见 -

http://jsfiddle.net/zu3k814d/7/

- 我清除了标题和段落，清除了图标和溢出的段落，但下面的链接/锚点仍然卡在左边。我希望它与上面的标题和段落对齐。我可以给它一个左边距，直到它清除图像并与上面的东西对齐，但我确信有一个更清洁的方式。

Answer 1

您只需要重新组织您的html，以便更容易浮动这两个项目。

这是工作代码。 jsfiddle --

Answer 2

而不是使用float，使用flex。

.container {
  display: flex;
  width: 30%;
}

.column {
  flex-direction: column;
}

i {
  margin-right: 0.75em;
  padding: 0.5em;
  color: #fff;
  border-radius: 50%;
  clear: both;
  background: rgb(255, 143, 69);
}

h3 {
  margin-top: 0;
  margin-bottom: 0.75em;
}

p {
  margin-bottom: 2.75em;
  overflow: auto;
}

a {
  font-size: 0.9em;
  color: #ff8f45;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="container">
  <div>
    <i class="material-icons">fingerprint</i>
  </div>
  <div class="column">
    <h3>Lorem Ipsum Dolor</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <a href="">Learn more...</a>
  </div>
</div>

Answer 3

以下是我从您的问题中理解的内容：

所以，你想要显示带有图标的锚标记，而不是在左下方，而是在右边，当标题和段落被清除时，对吗？

您可以采取以下措施：

在display:inline-block;的css中添加a。

如下：

a {
    font-size:0.9em;
    color:#ff8f45; 
    display:inline-block;
} 

然后你的结果将是这样的：

这是我更新的fiddle的链接。

---

编辑：您可以通过在css中为a标记添加以下两个属性来向右侧显示锚标记：

a{
  font-size:0.9em;
  color:#ff8f45; 
  white-space: nowrap;
  float:right;
}

---

我希望它有所帮助。

谢谢。