1

我正在努力让它发挥作用。

如果您查看以下 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

多谢你们

4

1 回答 1

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%;
}
于 2013-09-10T15:35:02.077 回答