Question

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

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

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

我已尝试将其设置为float:left，但图像会隐藏div。我还尝试使用 创建另一个div，并将其宽度设置为100％和float:right，以便尝试创建一个“缓冲区”，将内容重新推送到div向左，但缓冲区也将div推得太远了。

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

修改要明确我希望它看起来像这样：

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

Answer 1

摆脱向右浮动列表。而是在列表中添加一个填充左边的图像宽度（myImg是图像的id，myUl是列表的id）：

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

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

Answer 2

你必须给ul留出一个边距，以便从第一个div下面推出它。因为第一个div有position: absolute;，所以其他元素无法识别该div的维度而忽略它。

以下是修订后的代码fiddle

唯一的变化是#iContainer ul。

Answer 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;
}

左对齐float：右div

3 个答案: