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链接。

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

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

我希望它有所帮助。

感谢。

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

3 个答案: