清除小图标右边的三个文本元素而不进行包装

I want to float three text items right of a left-floated icon that is smaller than the text items, without the text items wrapping.

我想要在左浮动图标的右边浮动三个文本项，它比文本项要小，没有文本项的包装。

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; 
}

As you can see from --

正如你从—

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

-- I've cleared the heading and paragraph with clear on the icon and overflow for the paragraph but the link/anchor below stays stuck left. I would like it to line up with the heading and paragraph above it. I could give it a left margin until it clears the image and lines up with the stuff above, but I'm sure there's a cleaner way.

——我已经清除了标题和段落，图标清晰，段落溢出，但下面的链接/锚仍然停留在左边。我希望它与上面的标题和段落保持一致。我可以给它一个左边距，直到它清除图像并与上面的东西对齐，但是我确信有一个更干净的方法。

3 个解决方案

#1

You just needed to reorganize your html to make it easier to float both items.

你只需要重新组织你的html，使它更容易浮动两个项目。

Here is the working code. jsfiddle --

这是工作代码。jsfiddle——

#2

Instead of using float, use flex.

不要使用浮动，使用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>

#3

Here is what I understood from your question:

以下是我从你的问题中所理解的:

So, you want to display the anchor tag with the icon, not below it on the left, but on the right, when heading and the paragraph are cleared, right?

所以，当标题和段落被清除时，你想要用图标来显示锚标签，不是在左边，而是在右边?

Here is what you can do to do that:

以下是你可以做的:

add display:inline-block; in the css for a.

添加显示:inline-block;在css中。

Like the following:

如下:

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

And then your result will be something like:

然后你的结果会是:

Here is the link to your fiddle that I updated.

这是我更新的你的小提琴链接。

EDIT: You can display the anchor tag to the right by adding the following two attributes in you css for a tag:

编辑:您可以在您的css中为标记添加以下两个属性，从而向右显示锚标记:

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

I hope it helps.

我希望它有帮助。

Thanks.

谢谢。

#1