0

私はこの例を持っています：http：//jsfiddle.net/WkpL9/
HTML： 

<div class="span2">
    <div class="image-container">
        <img alt="" src="http://placehold.it/150x120"/>
        <p>asdadsadasdasdsadasdasdasdasdsadsad</p>
    </div>
</div>

CSS：

.image-container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.image-container img {
    max-height: 150px;
}

.image-container p {
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    bottom: 0px;
}

画像のキャプションを次のようにします。1。画像の上（最上層）に配置します。2.画像​​の下部に垂直に配置されます。3.省略記号付き。4.ラッピングdivから抜け出しません。

これは可能ですか？

私はtwitterブートストラップを使用しています。

4

3 に答える 3

1

私はそれを位置で行います：相対; と位置：絶対;、そのように：

.image-container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.image-container img {
    max-height: 150px;

    position: relative;

}

.image-container p {
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    bottom: 0px;

    position: absolute;
    top: 0;
    left: 0;

    text-align: center /* Not sure if I misunderstood you with this */

}


.image-container img {
    margin-top: 15px;
}

&hellip; 省略記号に関しては、テキストの後にこれを追加でき ます。それはあなたが意味したことでしたか？

于 2012-10-23T20:24:47.893 に答える
0

z-indexを使用して順序を指定します。これにより、2つのdivを重ねて配置し、どちらを上または下に配置するかを指定できます。ポジショニングに関しては、負の値（つまりtop: -50px;）を使用して、要素をターゲット位置より上に「持ち上げる」ことができます。

于 2012-10-23T20:07:47.137 に答える
0

1-のインストールに追加4-でtop:0x;使用 します。また、それを含むdivにinを設定し、要素の幅をに設定する必要があります。これがワードラップ付きのサンプルです。.imageContainer pbottom
word-wrap: break-word.imageContainer pheightpxp100%

于 2012-10-23T20:14:32.777 に答える