Картинка и текст. Как сделать чтобы при длинном тексте он не уползал под картинку?

Question

[serjioms]

html:

<div class="speakerItem">
                        <div>
                            <a href="#">
                                <img class="editIcon" src="app/public/images/delete_file_ico.png"/>
                            </a>
                        </div>
                        <div class="speakerName">
                            <span>
                                texttexttext
                            </span>
                        </div>
                        <br/>
                    </div>

Answer 1

[Дмитрий]

как вариант сделать списком + изображение задать псевдоэлементом
jsbin.com/tehetatopo/3/edit

<ul class="speakerItem">
    <li>Картинка и текст. Как сделать чтобы при длинном тексте он не уползал под картинку?</li>
    <li>Картинка и текст. Как сделать чтобы при длинном тексте он не уползал под картинку?</li>
    <li>Картинка и текст. Как сделать чтобы при длинном тексте он не уползал под картинку?</li>
    <li>Картинка и текст. Как сделать чтобы при длинном тексте он не уползал под картинку?</li>
    <li>Картинка и текст. Как сделать чтобы при длинном тексте он не уползал под картинку?</li>
    <li>Картинка и текст. Как сделать чтобы при длинном тексте он не уползал под картинку?</li>    
</ul>

.speakerItem{
    list-style: none;
}
.speakerItem li{
    position: relative;
    padding-left: 30px;
    margin: 10px 0;
}
.speakerItem li:before{
    content: '';
    position: absolute; top: 4px; left: 0;
    background: url('http://www.etonhostels.com.au/wp-content/uploads/2013/07/tiny-smiley-face.jpeg') no-repeat 0 0;
    width: 20px;
    height: 20px;
}

Comments

[whats]

Посмотри мое решение пожалуйста, не нужно делать как ты говоришь

[Дмитрий]

И почему не нужно делать?

[whats]

Потому что это плохой вариант
В моем варианте все автоматически меняется вне зависимости от наполнения, В твоем есть магические значения, захотел я картинку меньше сделать, мне нужно менять в цсс размеры и менять позицию элемента, при чем нужно это делать в 5 местах!!! А если я захочу в некоторых списках не ставить картинку ? Я должен буду указать позиционные селекторы и убрать бэкграунд.

[Дмитрий]

Если бабе это баба станет дедом.

[Дмитрий]

Все зависит от поставленной задачи

[whats]

soledar10: вы в вакууме растете и никогда не работали с большими проектами ! Где единственное что стабильно так это резкие смены задач. Когда поработаете тогда и поговорим :)

Answer 2

[whats]

jsfiddle.net/oe5L0204
Сделай обтекание и очисти поток

Answer 3

[Хикмат Абдунабиев]

Надо посмотреть CSS файл

Answer 4

[Никита Наумов]

если из простого решения

<div class="container">
    <div class="column">Картинка</div>
    <div class="column">Текст</div>
</div>

.container {
  display: table;
}
.column {
  display: table-cell;
}

Comments

[whats]

Это говноверстка !!!!

[Никита Наумов]

whats: говноверстка дивами делать? ок...

[whats]

Слушай умник, дивы это блочный элемент, Какого хуя у них стоит табличное отображение ? Верстай таблицами!! после таких как ты за верстку браться не хочется

[Сергей delphinpro]

whats: Вообще-то правильная у Никиты мысль. К чему я бы придрался - это к именованию классов. Сейчас именование отталкивается от расположения, а должно отражать назначение элементов. Т.е. переименовать .column в что-то типа .speakerItem__icon и .speakerItem__text

И еще, по поводу вашего "дивы это блочный элемент, Какого хуя у них стоит табличное отображение ? "- в w3c наверное они дураки сидят, раз они придумали, что блочным элементам можно задать табличное отображение.

[whats]

Сергей: дураки те кто не правильно читают спецификации, а в w3c правильно все придумали и не зря дивам дали блочное отображение, спанам строчное а таблицам табличное. Мысль говно, если вы поддерживаете говно верстку то тогда пожалуйста, я только рад этому, потому что у меня всегда будет работа.

[Сергей delphinpro]

whats: Т.е. плавающий блок плюс очистка потока это по вашему самое правильное решение? А ничего, что, согласно той же спецификации. на которую вы упираете, флоаты для этого не предназначены? И с этой точки зрения ваше решение чистой воды костыли.

[whats]

Сергей: линк на такую спецификацию, что то вы тут новое рассказываете. Флоуты для такого и предназначены как раз, для обтекания объектов текстом, как в данном случае в примере автора. МОжет быть не стоит зарывать себя в знаниях сейчас ? и прекратить бессмысленный спор ?