Question

div地图会让内容四处移动。

我希望内部div（青色）位于右下方以显示图例。我尝试使用float样式并且可以使它浮动left和right但是找不到类似bottom-right

的内容

我不确定我是否需要浮动，我只需要在地图上方使用青色div。

如果我想要它在右边，但在中间，那该怎么办？我尝试使用Top: 700px但是没有用。

.map {
    background: url(http://www.theodora.com/maps/new9/time_zones_4.jpg) no-repeat 0 0;
    width: 500px;
    height: 500px;
    margin: 5px auto;
}

.legend {
    top: 700px;
    float: right;
    background-color:cyan;
    width:200px;
    height:200px;
    border: 2px;
    border-style:double
}

<div class="map">
    <div class="legend">Some content! Some content! Some content!</div>
</div>

Answer 1

实现此目标的最佳方法是absolute位置：JS Fiddle

使用absolute定位，您可以告诉它与其直接非static父级的右下角对齐（在这种情况下，父级将为relative。

.map {
    background: url(http://www.theodora.com/maps/new9/time_zones_4.jpg) no-repeat 0 0;
    width: 500px;
    height: 500px;
    margin: 5px auto;
    position: relative;
}
.legend {
    background-color:cyan;
    width:200px;
    height:200px;
    border: 2px;
    border-style:double;
    position: absolute;
    bottom: 0;
    right: 0;
}

有关position媒体资源的更多信息：CSS Position Property。

将div放在另一个内

1 个答案: