不需要的内容在图像下丢失

Question

我在图像旁边有文字（现在是红色方块）。 当我使窗口非常小，然后文本在图像下面，我不希望这发生。

太好了：

坏：

如何防止这种情况？

<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;
}

这里是一个易于测试的小提琴：

http://jsfiddle.net/K4RFU/

Answer 1

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