, связанный с плавающим элементом и изображениями/конкретными блоками

Question

Я немного борюсь, чтобы заставить это работать.

Если вы посмотрите на следующий JSFiddle: http://jsfiddle.net/JUDXq/

Есть ли способ, чтобы сделать блок изображения сидеть хорошо рядом с красным блоком без его перемещения под красным блоком И еще есть другие изображения, далее вниз, чтобы быть 100% ширина?

Изображение предназначено столь же широко, как и родительский элемент. Если изображение больше родительского, мы можем использовать «max-width: 100%», чтобы изменить размер. Но если в родительском пространстве есть поплавок, есть ли способ сделать это?

<div class="parent"> 
    <div class="left"> 

    </div> 
    <p> 
     Lorem ipsum dolor sit amet, non ut, hymenaeos urna mi odio, non ac libero, turpis curabitur ante ultricies proin egestas convallis. In bibendum mauris quis placeat. Fusce interdum id faucibus dictum id adipiscing, non et elit, vel hendrerit libero, nulla donec ornare lacus et lacus lectus. In tristique, mauris mauris adipiscing neque, donec libero nulla sem lacus, nibh arcu nu. <strong> I would like the image to go right below this text.</strong> 
    </p> 
    <div class="one"> 
     <img src="http://placekitten.com/500/200"> 
    </div> 
</div> 

.parent { width: 500px; height:1000px; } 
.left {float:left; width:100px; height:200px; background:red; display:block; } 
.one { background:blue; } 

Изображение организовано Placekitten и приняты: Pieter Lanser

Спасибо, ребята

Answer 1

Это то, что вы ищете? http://jsfiddle.net/LQxVE/1/

.parent { width: 500px; height:1000px; } 
.left {float:left; width:100px; height:200px; background:red; display:block; } 
.one { background:blue; } 

img { 
    float: right; 
    width: 400px; 
} 

если я понять Ваш комментарий, это не может быть более подходящим: http://jsfiddle.net/LQxVE/2/

.one { 
    background:blue; 
    width: 80%; 
    float: right; 
} 

img { 
    max-width: 100%; 
}