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%;
}

处理浮动元素和图像/特定块

1 个答案: