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

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

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, но изображение представляет собой переменную ширину/высоту. Он не имеет определенной ширины/высоты.

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

Любое решение... работа?

Ответ 1

Вы можете сделать это с помощью некоторого 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>

Ответ 2

Вы можете сделать это без 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 и дружественного к маркетингу (маркетологи боятся divs!)

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

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

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

Ответ 3

Вот несколько простых 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>

Ответ 4

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

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

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

Смотрите: http://jsfiddle.net/9WMzZ/

Ответ 5

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

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

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

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