Question

我正在尝试找出最好的方法来链接其内嵌旁边浮动的图像，这将迫使链接根据需要变为多行，同时保持图像内嵌浮动在其旁边。

我在这里设置了一个示例 - http://jsfiddle.net/ubernoob/tYeGR/

如果您调整结果窗口的大小，您会看到一旦它达到足够小的宽度，图像将落在链接下方。

如何对此进行编码，以便链接转到多行并将图像浮动在旁边？

Answer 1

尝试在<img>之前添加<h3>代码，并从float:left

中删除<h3>

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

Answer 2

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

Answer 3

您可以将图像放在行中，然后在<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*/
}

这是一个混乱的问题：http://jsfiddle.net/jasper/tYeGR/19/

浮动问题，屏幕尺寸较小

3 个答案: