我在图像旁边有文字(现在是红色方块)。当我使窗口变得非常小时,文本会出现在图像下方,我不希望这种情况发生。
超好的:
坏的:
如何预防?
<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 以便于测试: