左对齐浮点数：右div

Question

我正在关注这个堆栈溢出问题的公认答案。

在上面的问题中，布局由图像和后面的无序列表组成（请参阅上面问题中的JSFiddle）。

在我的网站中，我试图做同样的事情，除了：

• 我正在使用具有一些内容的div来代替无序列表（这不是大问题）
• 我希望div（当前包含一些文本）是左对齐的，而不是示例中的右对齐行为。

我尝试将其设置为float:left ，但是图像随后模糊了div。 我还尝试使用 创建另一个div 并将其宽度设置为100％并float:right ，以尝试创建一个“缓冲区”，它将内容的div推回左侧，但是该缓冲区也将div推得太左。

为了使行为与JSFiddle示例相同，除了将无序列表左对齐外，我需要做什么？ 我大概可以在那里处理其余的事情。

编辑要明确，我希望它看起来像这样：

|---------||-------------------|            Empty space                  |
|   Image || Unordered List    |   |--------------------------|      ... |End of page
|_________||___________________|                                         |

Answer 1

摆脱将列表向右浮动。 而是在列表的左侧添加padding，并添加图片的宽度（myImg是图片的ID，而myUl是列表的ID）：

var imgWidth = $("#myImg").width();
$("#myUl").css("padding-left", imgWidth.toString() + "px");

http://jsfiddle.net/78zT3/1/

Answer 2

您将必须给ul左边距以将其从第一格下推出。 因为第一个div的position: absolute; 其他元素则无法识别该div的尺寸，因此会忽略它。

这是修改后的代码小提琴

唯一的变化是在#iContainer ul 。

Answer 3

看到这里更新的小提琴

特别要注意的是，“图像”的位置设置为绝对位置，因此，当您左移浮动列表时，它会显示在其下方。 因此，您需要将其位置设置为相对，同时将其向左浮动。

修订的CSS：

#iContainer {
    background: #ccc;
    overflow: hidden;
    position: relative
}
#iContainer div {
    position: relative;
    display:inline-block;
    float:left;
    top: 0; right: 0; bottom: 0; left: 0;
    *height: 100% /* just for you, IE7 */
}
#iContainer img {
    height: 100%;
}
#iContainer ul {
    float: left;
}