html - 不需要的内容落在图像下方

Question

我在图片旁边有文字(现在是红色方 block )。当我将窗口设置得非常小时，文本就会出现在图像下方，我不希望这种情况发生。

太好了:

不好:

如何预防？

<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/

Answer 1

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