1

我在图像旁边有文字(现在是红色方块)。当我使窗口变得非常小时,文本会出现在图像下方,我不希望这种情况发生。

超好的:

在此处输入图像描述

坏的:

在此处输入图像描述

如何预防?

<div class="entrie">
                <img class="entrieImage" src="images/img01.png"/>

                <div class="entrieInfo">
                    <div class="band">Green</div>
                    <div class="album">...</div>
                    <div class="label">ATCO</div>
                    <div class="year">1966</div>
                    -
                    <div class="tags">rousseau, green, woodsy, band photo, 12IN, tree, civilization, Atco, 1960's, Fuzz
                    </div>
                </div>

            </div>

-

.entrie {
    float: left;
    margin-bottom: 40px;
    position: relative;
}

.entrieInfo {
    width: 200px;
    float: left;
    margin-left: 10px;
    margin-right: -45px;
    position: relative;
    z-index: 2;

}

.entrieImage {
    /* if you only set the width then the height will be set automaticly proportional*/
    width: 300px;
    height: 300px;
    float: left;
    position: relative;
    z-index: 1;
    background: red;
}

这里有一个 js fiddle 以便于测试:

http://jsfiddle.net/K4RFU/

4

1 回答 1

2

您可以min-width.entrie其上设置足够大以包含其内容的 a。

于 2012-07-01T14:05:04.373 回答