Размещение значка с текстом вопроса в макете жидкости

Question

пытаюсь сделать вещи выглядят как на картинке выше, это не для верстки жидкости, но независимо от того, что я делаю, что значок телефона с номером 1- 844 ..... не движется вправо рядом с нами. Вот JS скрипка: 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; 
} 

Am используя 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>

---

В качестве примечания стороны, я хотел бы указать на мои личные данные hate для плавающих элементов, так как это действительно может испортить вещи с точки зрения элементов позиционирования.

Вот почему у нас есть display и positioning css правила для.