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 フィドルを次に示します。

http://jsfiddle.net/K4RFU/

4

1 に答える 1

2

そのコンテンツを包含するのに十分な大きさのmin-widthonを設定できます。.entrie

于 2012-07-01T14:05:04.373 に答える