Как разместить абзац рядом с изображением, не оборачивая изображение?

Question

Я хочу разместить абзац рядом с изображением, но без переноса изображения.Например:

div.img {
        float: left;
        display: block;
        margin: 15px 2% 0 2%;
        width: 26%; /* I cannot use that */
}

div.info {
        float: right;
        display: block;
        margin: 15px 2% 0 2%;
        width: 66%; /* The width should be variable */
}

Проблема в том, что я могу это сделать, если установить width для img и info, но изображение имеет значение переменная ширина / высота ,У него нет определенной ширины / высоты.

Я почти потерян в этой ситуации.Пожалуйста, предложите мне что-нибудь. Я хочу, чтобы оба div'а плавали рядом друг с другом без переноса ... без указания ширины поля.

Любое решение .. обходной путь?

Answer 1

Вы можете сделать это без JS.Смотрите мою скрипку http://jsfiddle.net/VaSn6/5/

Поместите изображение и абзац рядом:

<img />
<p>text</p>

С помощью CSS:

img {
    float: left;
    margin-right: 10px;
    clear:both;
}
p {
    margin-left: 0px;
    overflow:auto;
    display:block;

}

Мой jsfiddle расширяет пример доочистка абзацев и выровненных по правому краю изображений.

Мне нужно что-то вроде этого, которое было бы дружественным к CMS и дружественным для маркетинговой команды (маркетологи боятся дивов!)

Это работает как минимум до IE8.

Если вам нужно расположить вертикально центрированные изображения рядом с текстом, вам понадобятся некоторые div: http://jsfiddle.net/VaSn6/12/ Это будет только вертикальный центр более длинного текста, чем изображения.

Или если вывсе в порядке с таблицами CSS, я бы пошел с http://jsfiddle.net/sY4H8/1/ (также хорошо до IE8).Это работает, даже если текст меньше, чем изображение.

Answer 2

Вот несколько простых CSS для выполнения этой работы.

img {
    float: left;
    border: 1px solid black;
    margin: 5px 10px 10px 0px;
}

<p>
    <img src="http://scalabilitysolved.com/content/images/2014/May/stackoverflow.png" width="100" height="140">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident suscipit, aspernatur aliquid ea, vel distinctio cupiditate reprehenderit! Laborum amet, accusantium nesciunt repudiandae, ad illo dignissimos maiores, dolorum est aliquam eveniet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident suscipit, aspernatur aliquid ea, vel distinctio cupiditate reprehenderit! Laborum amet, accusantium nesciunt repudiandae, ad illo dignissimos maiores, dolorum est aliquam eveniet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident suscipit, aspernatur aliquid ea, vel distinctio cupiditate reprehenderit! Laborum amet, accusantium nesciunt repudiandae, ad illo dignissimos maiores, dolorum est aliquam eveniet.
</p>

Answer 3

Единственный известный мне способ сделать это без JavaScript - это обернуть два элемента в элемент контейнера, свойство которого «overflow» имеет значение «auto», переместить изображение и установить для «overflow» абзаца значение « auto ', а также.

Посмотрите, как работает здесь: http://jsfiddle.net/leegee/vpjjB/

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

Кстати, когда вы визуализируете абзацы и изображения, я изменил разметку, чтобы использовать соответствующие «семантические» элементы старомодных «p» и «img».

Answer 4

только плавающее изображение, а не абзац текста:

img {
    float: left;
    margin-right: 10px;
}

p {
    font-family: Arial;
    font-size: 13px;
    line-height: 1.3em;
}

См .: http://jsfiddle.net/9WMzZ/

Answer 5

Вы можете сделать это с помощью JavaScript:

document.getElementById('content').style.width = (
    document.getElementById('wrapper').offsetWidth -
    document.getElementById('logoimg').offsetWidth - 10
) + "px";

#logoimg { float: left; }
#content { float: left; padding-left: 5px; margin:0; }
.clearer { clear: both; }

<div id="wrapper">
<img id="logoimg" src="http://i.creativecommons.org/l/by/3.0/88x31.png" />
    <div id="content">A Fehér Kéményseprőket is bevonta a Fidesz a bajban lévő hitelesek megsegítéséről szóló törvényjavaslat kidolgozásába. A Rogán Antal és Kósa Lajos által bejelentett törvénycsomagról konkrétumokat továbbra sem tudni, a politikusok az egyeztetések lezártával ígérik nyilvánosságra hozni az összefésült javaslatokat. A tárgyalásba bevont, magát civil egyesületként definiáló Fehér Kéményseprők szervezet a radikális jobb- és baloldalon is igen népszerű, rendezvényein az Antifasiszta Liga és a kommunisták mellett gárdisták is felbukkannak. A Fidesz szerint a kéményseprők jól ismerik az érintettek problémáit. Az asztalnál ülő egy másik szervezet annyira jól ismeri a problémákat, hogy megoldásként javasolja: az elmúlt években elszenvedett árfolyamveszteséget a bankok "adják vissza" a hiteleseknek.</div>
    <div class="clearer"></div>
</div>