保持图像旁边的更新文本

时间:2015-04-04 02:04:15

标签: html css image user-experience

我的文字放在图片旁边。我正在使用AngularJS,以便文本动态更改。我希望那个文字适合那个图像,无论什么,而不是溢出。

CSS:

.album-art{
    float: left;
    height: 115px;
    width: 115px;
    margin-left: 15px;
    margin-right: 15px;
}

.player{
    background-color: black;
}

.now-playing-text {
    color: white;
    float:left;
}

.gotham-bold-text {
    font-family: gotham-bold;
}

.gotham-book-text {
    font-family: gotham-book;
}

.playing-text {
    width: 100%;
    height: 130px;
    display: block;
}

HTML:

   <ion-view title="Now Playing">
    <ion-nav-buttons side="left">
        <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
    </ion-nav-buttons>
<ion-content class="player">
    <div class="now-playing">
        <canvas class="visualizer"></canvas>
    </div>
    <div class="container-text">
    <div class="playing-text"><img class="album-art" src="{{art}}"><h1 class="now-playing-text"><div class="gotham-bold-text">{{title}}</div></h1></div>
    </div>
</ion-content>
</ion-view>

0 个答案:

没有答案