Question

你可能认为这个问题是重复的，但请先检查一下jsffiddle以确定它不是

通常情况下，我只是向右或向左浮动图像，文本会向右浮动，但是当我刚刚在图像上时，它会完美地工作。但是这种情况下我在div的角落有四个图像。我不希望文本左右两边的图像，但我做希望文本不被隐藏。

我的意思是文本在当前情况下的图像开始，以及我要修复的内容。

我尝试了什么

我试图在图片上左右浮动，并给.box2类明确：两者

Answer 1

更改为：

.box {
    float: left;
    width: 600px;
    border: 2px solid black;
}
.img1 {
    float:left;
    top: 0px;
    left: 0px;
    width:50px;
    height: 50px;
}
.img2 {
    float:right;
    top: 0px;
    right: 0px;
    width: 50px;
    height: 50px;
}
.img3 {
    float:left;
    clear:both;
    bottom: 0px;
    left: 0px;
    width: 50px;
    height: 50px;
}
.img4 {
    float:right;
    bottom: 0px;
    left: 0px;
    width: 50px;
    height: 50px;
}

<强> Demo

Answer 2

由于您的所有图片都是绝对定位的，因此您可以将box2 div设为position: relative，然后再将box2设为z-index: 1。

简而言之：添加：

z-index:1;
position: relative;

到box2。

说明：如果元素没有静态定位（所有DOM元素的默认值为position: static），您可以使用z-index。这意味着＆＃39;级别＆＃39;或者＆＃39;层＆＃39; （如在Photoshop图层中）此元素是。 z-index的默认值为0。因此，将文本框放在更高的层中，使其在其他图层上方呈现（图像，默认情况下设置为z-index: 0）。

希望这会有所帮助：）

Answer 3

<强> CSS

.box {
    max-width:600px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    border: 2px solid black;
}
.img1 {
    position: relative;
    top: 0px;
    left: 0px;
    width:50px;
    height: 50px;
    float:left;
}
.img2 {
    position: relative;;
    top: 0px;
    right: 0px;
    width: 50px;
    height: 50px;
    float:right;
}
.img3 {
    position: relative;
    bottom: 0px;
    left: 0px;
    width: 50px;
    height: 50px;
    float:left;
}
.img4 {
    position: relative;;
    bottom: 0px;
    right: 0px;
    width: 50px;
    height: 50px;
    float:right;
}

fiddle

Answer 4

基于@Alek他的回答以及您对不想使用br，span或div的评论我提出了两条建议：

第一个您将图片浮动到底部和 float父.box：

http://jsfiddle.net/EL5n9/19/

或

第二个几乎相同，除了你没有float父.box，但使用了clearfix。就个人而言，我不喜欢clearfixes并尽可能避免使用它们，但为了防止您无法浮动父级，您可以这样做：

http://jsfiddle.net/EL5n9/18/

Answer 5

这是因为您将图像位置设置为绝对位置，以便图像与文本重叠。

你可以简单地移动imgae下面的文本div，这是演示：

UPDATE FIDDLE

  <div class="box">

    <img class="img1" src="http://s10.postimg.org/7r9itbhs9/default_image.jpg" alt="default image">
    <img class="img2" src="http://s10.postimg.org/7r9itbhs9/default_image.jpg" alt="default image">
    <img class="img3" src="http://s10.postimg.org/7r9itbhs9/default_image.jpg" alt="default image">
    <img class="img4" src="http://s10.postimg.org/7r9itbhs9/default_image.jpg" alt="default image">
</div>
                <div class="box2">this is the text
    </div>

css图像变成了文本

我尝试了什么

5 个答案: