浮动问题与更小的屏幕尺寸

问题描述：

我想弄清楚最好的方法有一个图像链接漂浮在它旁边的内联，这将强制链接成为多线所需，同时保持图像内联下一步浮动到它。浮动问题与更小的屏幕尺寸

我在这里建立一个例子 - http://jsfiddle.net/ubernoob/tYeGR/

如果大小的结果窗口中，你会看到，一旦它击中一个足够小的宽度图像将落在下面的链接。

我该如何编码，这样链接将进入多行并将图像放在旁边？

为了浮动'h3'，请记住，如果浮动元素没有设置宽度，则浮动元件会变得扭曲。 – marramgrass

答

尝试把<img>标签<h3>之前并删除float:left从<h3>

我编辑的jsfiddle：http://jsfiddle.net/tYeGR/7/

感谢您的评论，我试过了，它只是放置在上面的图像，而不是在下面，同样，如果我把图像放在H3中它的结果相同。 –

您需要先放置它，然后移除“float：left;”在h3上工作。例如：http://jsfiddle.net/tYeGR/10/ –

@ uber_n00b检查jsfiddle链接，看看你是否在寻找 – DiogoDoreto

答

这个例子的工作原理：http://jsfiddle.net/jalbertbowdenii/tYeGR/18/但我改变了你的花车以绝对定位IMG的。如果这还不够好，@mediaqueries是要走的路。我在jsfiddle尝试了两次，但没有vail。可能是用户错误。

答

您可以完全在他们的行定位图像，然后添加一些填充到<h3>元素，因此链接不要被图像覆盖：

.list img { 
    position : absolute; 
    right : 10px; 
} 
.list h3 { 
    float  : left; 
    font-size : 12px; 
    padding : 10px 60px 10px 0;/*notice the extra 50px of padding I added to padding-right*/ 
    min-height : 50px;/*Notice this is added beacuse the image will not dictate height since it is positioned absolutely*/ 
}

这里是一个的jsfiddle更动： http://jsfiddle.net/jasper/tYeGR/19/

浮动问题与更小的屏幕尺寸

相关推荐