Keep Image и текст рядом друг с другом

Question

У меня есть простая скрипка: https://jsfiddle.net/jzhang172/9nfb0gj3/

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

img{ 
 
    height:100px; 
 
    width:100px; 
 
    display:inline-block; 
 
    float:left; 
 
} 
 
p{ 
 
    float:left; 
 
    display:inline-block; 
 
    width:300px; 
 
}

<div class="box"> 
 
    <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" alt=""> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat ex eros. Maecenas sit amet tellus vitae lacus facilisis varius pretium non sem. Ut non metus tincidunt, rhoncus dolor ut, suscipit arcu. Vestibulum dictum erat metus, nec euismod sem sagittis malesuada. Aenean tristique aliquet euismod. Nullam ultrices diam vel eros bibendum, in tincidunt felis fermentum. Nam vel finibus neque. Nunc ac ligula congue, porttitor arcu sit amet, molestie mi. In dignissim suscipit ligula, a sollicitudin metus lobortis ut. Duis mattis turpis eu purus ultricies, id efficitur enim aliquam.</p> 
 
</div>

Answer 1

Вы делаете, как это, где вы установили white-space: nowrap на box и удалить float: left на вашем img и p. Я также добавил vertical-align: top на img, чтобы он был выровнен по высоте.

white-space: nowrap делает трюк, рассказывая о встроенных элементах, чтобы не сломать линию.

.box { 
 
    white-space: nowrap; 
 
} 
 
img{ 
 
    height:100px; 
 
    width:100px; 
 
    display:inline-block; 
 
    vertical-align: top; 
 
} 
 
p{ 
 
    white-space: normal; 
 
    display:inline-block; 
 
    width:300px; 
 
}

<div class="box"> 
 
    <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" alt=""> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat ex eros. Maecenas sit amet tellus vitae lacus facilisis varius pretium non sem. Ut non metus tincidunt, rhoncus dolor ut, suscipit arcu. Vestibulum dictum erat metus, nec euismod sem sagittis malesuada. Aenean tristique aliquet euismod. Nullam ultrices diam vel eros bibendum, in tincidunt felis fermentum. Nam vel finibus neque. Nunc ac ligula congue, porttitor arcu sit amet, molestie mi. In dignissim suscipit ligula, a sollicitudin metus lobortis ut. Duis mattis turpis eu purus ultricies, id efficitur enim aliquam.</p> 
 
</div>

2016 вариант был бы flex

.box { 
 
    display: flex; 
 
} 
 
img{ 
 
    height:100px; 
 
    width:100px; 
 
} 
 
p{ 
 
    width:300px; 
 
}

<div class="box"> 
 
    <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" alt=""> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat ex eros. Maecenas sit amet tellus vitae lacus facilisis varius pretium non sem. Ut non metus tincidunt, rhoncus dolor ut, suscipit arcu. Vestibulum dictum erat metus, nec euismod sem sagittis malesuada. Aenean tristique aliquet euismod. Nullam ultrices diam vel eros bibendum, in tincidunt felis fermentum. Nam vel finibus neque. Nunc ac ligula congue, porttitor arcu sit amet, molestie mi. In dignissim suscipit ligula, a sollicitudin metus lobortis ut. Duis mattis turpis eu purus ultricies, id efficitur enim aliquam.</p> 
 
</div>

Answer 2

Один хорошо вариант, чтобы обернуть IMG в контейнере и использовать ширину на основе процентного:

https://jsfiddle.net/5fs0s4n3/

.img-container{ 
    width: 30%; 
    float: left; 
} 
img{ 
    height:100px; 
    width:100px; 
} 
p{ 
    float:left; 
    display:inline-block; 
    width:70%; 
} 

Answer 3

Вы можете изменить дисплей от inline-block к table и table-cell для достижения этой цели.

.box { 
 
    display: table; 
 
    table-layout: fixed; 
 
} 
 
.box > * { 
 
    display: table-cell; 
 
} 
 
img { 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 
p { 
 
    width: 300px; 
 
}

<div class="box"> 
 
    <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" alt=""> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat ex eros. Maecenas sit amet tellus vitae lacus facilisis varius pretium non sem. Ut non metus tincidunt, rhoncus dolor ut, suscipit arcu. Vestibulum dictum erat metus, nec euismod 
 
    sem sagittis malesuada. Aenean tristique aliquet euismod. Nullam ultrices diam vel eros bibendum, in tincidunt felis fermentum. Nam vel finibus neque. Nunc ac ligula congue, porttitor arcu sit amet, molestie mi. In dignissim suscipit ligula, a sollicitudin 
 
    metus lobortis ut. Duis mattis turpis eu purus ultricies, id efficitur enim aliquam.</p> 
 
</div>

Answer 4

Игра с полями решает эту проблему: https://jsfiddle.net/oweahea8/1/

img{ 
    height:100px; 
    width:100px; 
    display:inline-block; 
    float:left; 
    margin-right: -100px; 
} 
p{ 
    float:left; 
    display:inline-block; 
    margin-left: 100px; 
}