在流体布局中放置带有文本问题的图标

Question

我试图让事情看起来像上图，这是为了流畅的布局，但无论我做什么，那个 phone 编号为 1-844 的图标......不移到右边与我们交谈。这是 JS fiddle: http://jsfiddle.net/xtf205mk/

.fluid {
  clear: both;
  margin-left: 0;
  width: 100%;
  float: left;
  display: block;
}
.top_nav_icon {
  vertical-align: middle;
}
.call_icon_header {
  content: url(images/call-us-icon.png);
  float: left;
}
.talk_icon_header {
  content: url(images/talk-to-us-icon.png);
  float: left;
}
.float_right {
  float: right;
}
.top_nav_icon {
  vertical-align: middle;
}
.top_nav_list1 {
  float: left;
}
.top_nav_list1_1 {
  font-size: 1em;
  width: 100%;
  float: right;
}
.top_nav_list1_2 {
  font-size: 1em;
  width: 100%;
  clear: none;
}
.top_nav_list1_2 {
  font-size: 1em;
  width: 100%;
  clear: none;
}

我正在使用 DW CC，但视觉辅助无法帮助我将内容向右移动。

谁能帮忙解决一下，谢谢。

Answer 1

我已经使用伪元素来实现您的功能要求：

我希望您从这里了解的要点是我对 display:inline-block;

的使用

.phone,
.talk {
  position: relative;
  display: inline-block;
  padding-left: 50px;
  height: 20px;
  width: 150px;
  padding-top: 10px; /*this is to 'vertically align' the text (adjust for your image height)*/
}
.phone:after {
  content: "";
  position: absolute;
  height: 40px;
  width: 40px;
  left: 0;
  top: 0;
  background-image: url(http://placekitten.com/g/200/300); /*change to phone icon*/
}
.talk:after {
  content: "";
  position: absolute;
  height: 40px;
  width: 40px;
  left: 0;
  top: 0;
  background-image: url(http://placekitten.com/g/200/300); /*change to chat icon*/
}

<div class="phone">phone here</div>
<div class="talk">chat here</div>

作为旁注，我想指出我个人对浮动元素的讨厌，因为这真的会把事情搞砸在定位元素方面。

这就是为什么我们有 display 和 positioning css 规则的原因。

在流体布局中放置带有文本问题的图标

Placement of icon with text issue in fluid layout

css

media-queries

responsive-design