html - 左对齐 float :right div

Question

我正在关注 this stack overflow 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-left，图像的宽度(myImg 是图像的 id，myUl 是列表的 id):

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

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