css - 图像和两个跨度对齐到 div

Question

我有以下文本 CSS 代码:

.text2 
{
vertical-align: middle;
color: white;
text-align: right;
padding-right: 5px;
line-height: 40px;
float: right;
white-space: nowrap;
}

我的问题是 text2 的尺寸可变我希望它在没有溢出的情况下向左对齐。

https://jsfiddle.net/4oc0b2pe/5/

Answer 1

移除.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>