Изображение плавающее право на div

У меня есть текстовый блок (div), который нужно обернуть вокруг изображения, плавающего вправо. Однако он не работает.Изображение плавающее право на div

Это то, что я сейчас:

<img style="float: right;" src="images/IMG_20130906_155859.jpg" alt="IMG 20130906 155859" width="200" height="267" /> 
<div class="customintro"> 
<p>Lorem ipsum dolor sit amet, quodsi pertinax ex mei, admodum corpora percipit ad cum. Recteque dignissim eu est. Ad vocent veritus has, quas movet complectitur no eos. Verear feugait ex mea, vix dicat congue eu, ne mel oratio appetere democritum. Qualisque sententiae est ei.Ei usu nostrum accusamus. Feugait temporibus ne sed, at clita eleifend nam, et dolor utinam equidem his. Vis sumo verterem ex, ut esse dolor appellantur his. Consul mentitum mnesarchum ne cum, saepe scaevola reformidans an mea, eu pri postea docendi invenire. Cum te soleat scaevola accusamus, ut sea euismod inimicus aliquando.Id noster incorrupte qui, quidam equidem vituperata ne sea. Odio probo persequeris ei sed, ea laudem electram per. Pro ea illum verear laoreet. Inani legimus contentiones eu per, id diceret consulatu pri, vitae cetero ad ius. In audiam necessitatibus nec, consequat appellantur mel te. Omnes cotidieque vix ea, quo iudico theophrastus et, in dolor option facilisi nam.</p></div>

CSS:

div.customintro { 
padding: 10px; 
background-color: #AAAAAA; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
}

Это результат: enter image description here

Как вы можете видеть, текст обтекает вокруг изображения (это здорово), но div все еще находится за изображением. Как я могу заставить div оставаться слева от изображения? Я искал разные стили отображения, но я не могу заставить его работать.

Конечно, он работает, когда я устанавливаю ширину в div, но я не хочу этого, потому что размер изображения меняется.

источник

2013-11-17 Compizfox

Можете ли вы поделиться демонстрацией fiddel? –

Это волшебство display: table-cell приходит на помощь. Добавьте на свой div.customintro этот дисплей. (Jsfiddle)

div.customintro { 
    display: table-cell; 
    padding: 10px; 
    background-color: #AAAAAA; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
}

Обратите внимание, что это не работает для Internet Explorer 7 (и ниже), но вы можете добавить display: inline-block, который обеспечивает запасной вариант.

источник

2013-11-17 17:17:09

дисплей: таблица-cell? Ну, отлично! Спасибо за ответ. – Compizfox

Добавить это в .customintro div.

float:left; 
width:calc(100% - 220px); //200px of image, 20px of padding

Fiddle here.

источник

2013-11-17 17:22:27 Hiral

Спасибо за ответ, но дело в том, что я буду использовать разные изображения разных размеров. Таким образом, изображение 200px этого примера будет отличаться. – Compizfox

Используйте процент в этом случае или идите с решением Майка. – Hiral

Более простой ответ, чем два уже отправил, чтобы поставить <div> и <img>, как display: inline-block поэтому они рассматриваются как встроенные элементы. Свойство float должно работать должным образом.

источник

2013-11-17 18:20:02 gchiconi

Изображение плавающее право на div

ответ

Смежные вопросы