如何有一个div与两个图像在任何9个可能的位置 [英] how to have a div with two images in any of 9 possible positions

问题描述

我已经捣乱了我的大脑，并尝试了我在线阅读的一切，但无法想象
如何做到这一点在HTML 4和CSS 2.1（用于SharePoint 2010）。

I've racked my brain and tried everything I've read online but can't figure it out how to do this in HTML 4 and CSS 2.1 (for use in SharePoint 2010).

我有一个已知高度和宽度的div，有两个未知高度和宽度的图像。我们可以假设图像小于div。我希望能将这两个图片放置在以下某个位置：

I've got a div of known height and width with two images of unknown height and width. We can assume the images are smaller then the div. I want to be able to position the two images in one of these locations:

• 左上角


• top middle


• 右上


• 左中


• 中间中


• 中心右


• 左下


• 下中


• 右下

• top left
• top middle
• top right
• center left
• center middle
• center right
• bottom left
• bottom middle
• bottom right

每张图片可以位于不同的位置。

Each of the two images can be in a different location.

任何想法/帮助？ / p>

Any ideas/help?

<div style="width: 500px; height: 500px">
    <img src="..." />
    <img src="..." />
</div>

推荐答案

我只需要6个类来描述所有

I'd just make 6 classes to describe all the positions, then apply 2 to each image.

小提琴

.left {
    left: 0;
}
.center {
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}
.right {
    right: 0;
}
.top {
    top: 0;
}
.middle {
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
}
.bottom {
    bottom: 0;
}

<img class="left middle" />

这篇关于如何有一个div与两个图像在任何9个可能的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！