我有以下文本 CSS 代码:
.text2
{
vertical-align: middle;
color: white;
text-align: right;
padding-right: 5px;
line-height: 40px;
float: right;
white-space: nowrap;
}
我的问题是 text2 的尺寸可变 我希望它在没有溢出的情况下向左对齐。
最佳答案
移除.divboxheader
的宽度。结果仅在全屏模式下可见。
.divbox {
width: 50%;
display: inline-block;
font-family: Helvetica, "Lucida Grande";
font-size: 14px;
position: relative;
box-sizing: border-box;
padding: 2px;
}
.divboxheader {
display: block;
height: 40px;
background-color: rgb(43, 51, 56);
text-overflow: ellipsis;
}
.img {
vertical-align: middle;
display: table-cell;
height: calc(100% - 4px) !important;
float: left;
margin: 2px 0px;
width: 20%;
}
.text1 {
vertical-align: middle;
color: white;
text-align: center;
padding-left: 5px;
line-height: 40px;
width: 50%;
float: left;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.text2 {
vertical-align: middle;
color: white;
text-align: right;
padding-right: 5px;
line-height: 40px;
float: right;
white-space: nowrap;
}
<div class="divbox">
<div class='divboxheader'>
<img class='img' src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider1.jpg" />
<span class='text1'>Text1 Text1 Text1 text1 text1 text1 text1</span>
<span class='text2'>text2 text2 text2</span>
</div>
</div>
关于css - 图像和两个跨度对齐到 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44565291/