html - 中心 div 和 float 图像

Question

我正在尝试使页脚菜单居中，并使图像带有 float: right。但是菜单会在未被图像占用的宽度内居中。
那么是否可以将菜单相对于整个屏幕或容器宽度居中？

我尝试在 div 中包含图像并将 position: relative 分配给 div 并为图像分配 position: absolute 并将 div 宽度调整为 100%但是我的菜单无法访问。如果我将图像的 z-index 更改为 -1，我可以单击菜单，但图像会消失。

这是一个例子:CodePen .

Answer 1

你能发布你的完整代码吗？包括 HTML 和 CSS

从您所写的看来，您应该有两个 div:一个用于页脚文本，另一个用于图像。你应该用 footer 包裹你的整个页脚以获得良好的实践。您可以在图像上使用绝对定位。

.footer {
    width: 100%;
    height: 250px; /* Or whatever % or px value you'd like */
    position: relative;
} /* feel free to assign other values, such as a border, shadow, etc. */

.img {
    right: 0;
    position: absolute;
}

另一种方法是创建一个名为“footer wrapper”的 css id，您可以使用它来将文本包装在 div 中。这不仅可以用于页脚。一个经典的包装示例如下所示:

.wrapper {
    max-width: -webkit-calc(800px - (#{$spacing-unit} * 2));
    max-width:         calc(800px - (#{$spacing-unit} * 2));
    margin-right: auto;
    margin-left: auto;
    padding-right: $spacing-unit;
    padding-left: $spacing-unit;
    @extend %clearfix;
}

$spacing-unit 是一个 _sass 变量，您可以将其设置为特定值(以像素为单位)。