左对齐浮动：右 div答案

【问题标题】：Left align float:right div左对齐浮动：右 div
【发布时间】：2013-12-09 20:49:37
【问题描述】：

我正在关注this stack overflow question 的公认答案。

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

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

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

我尝试将其设置为float:left，但是图像随后会遮盖 div。我还尝试使用&nbsp; 创建另一个div，并将其宽度设置为100% 和float:right，以便尝试创建一个“缓冲区”，它将带有内容的div 推回左侧，但是缓冲区也将 div 推得太左。

除了无序列表左对齐之外，我需要做什么才能获得与 JSFiddle 示例中相同的行为？我可能可以从那里处理剩下的事情。

编辑为了清楚起见，我希望它看起来像这样：

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

【问题讨论】：

你能做一个 jsfiddle 来演示会发生什么吗？
你能做一个 jsfiddle 来演示吗？
@DanGoodspeed 太吓人了！
jsfiddle.net/thirtydot/WA9Tv 是前面示例中的小提琴。我希望无序列表中的文本在图像旁边左对齐
另外，请参阅上面的编辑以说明我希望它看起来像什么

标签： html css

【解决方案1】：

摆脱向右浮动列表。而是在列表中添加一个 padding-left 和图像的宽度（myImg 是图像的 id，myUl 是列表的 id）：

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

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

【讨论】：

【解决方案2】：

您必须给ul 一个margin-left 以将其从第一个div 下推出。因为第一个 div 有 position: absolute;，所以其他元素无法识别该 div 的尺寸并忽略它。

这里是修改后的代码fiddle

唯一的变化是#iContainer ul。

【讨论】：

我尝试了解决方案，这当然是进步，但我希望避免硬编码的margin-left。如果你看到这个小提琴，我已经改变了无序列表中的元素，现在图像和列表之间有很大的差距。有没有办法避免这种情况？ jsfiddle.net/WA9Tv/33

【解决方案3】：

See here for the updated fiddle

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

修改后的 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;
}

【讨论】：

问题是现在图像扩展为完整大小。图像应该被限制在与无序列表相同的高度。