我的文字放在图片旁边。我正在使用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>