完整的文本总是响应地对齐图像的右侧

Question

＆＃13;

＆＃13;

.brand {
  font-size:1.2em;
  color:#777 !important;
  display:inline-block;
  vertical-align: middle;
}

.car {
  display:inline-block;
  vertical-align: middle;
  padding:5px 30px 0px 20px;
}

.car.img {
  margin:0 !important;
  width:100% !important;
  height:auto !important;
}

.date {
  text-align: right;
  font-size:14px;
  color: grey;
}

＆＃13;

<div id="wrapper">
  <div class="car">
    <img src="http://via.placeholder.com/100x100">
  </div>
  <div class="brand">
    BRAND BRAND BRAND BRAND HELLO 
    <div class="date">
      <time>
      12 november 1865
      </time>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果我向HELLO添加一个brand-title，则会将文字推送到图片下方。当brand-title变得更长时，如何使它始终位于图像的右侧并垂直位于中间？同样为了响应，它必须保持这样（请不要浮动或弹性箱）。

Answer 1

许多解决方案。一种是使用表格。

.wrapper {
  display: table;
}
.brand {
  font-size:1.2em;
  color:#777 !important;
  display:table-cell;
  vertical-align: middle;
}

.car {
  display:table-cell;
  vertical-align: middle;
  padding:5px 30px 0px 20px;
}

.car.img {
  margin:0 !important;
  width:100% !important;
  height:auto !important;
}

.date {
  text-align: right;
  font-size:14px;
  color: grey;
}

<div id="wrapper">
  <div class="car">
    <img src="http://via.placeholder.com/100x100">
  </div>
  <div class="brand">
    BRAND BRAND BRAND BRAND BRAND HELLO HELLO 
    <div class="date">
      <time>
        12 november 1865
      </time>
    </div>
  </div>
</div>

或者，巧妙地使用宽度。

.brand {
  font-size:1.2em;
  color:#777 !important;
  display:inline-block;
  max-width: calc(100% - 100px - 20px - 30px - 1ch); /* width of window minus width taken up by left block */
  vertical-align: middle;
}

.car {
display:inline-block;
  vertical-align: middle;
  padding:5px 30px 0px 20px;
}

.car.img {
  margin:0 !important;
  width:100% !important;
  height:auto !important;
}

.date {
  text-align: right;
  font-size:14px;
  color: grey;
}

<div id="wrapper">
  <div class="car">
    <img src="http://via.placeholder.com/100x100">
  </div>
  <div class="brand">
    BRAND BRAND BRAND BRAND BRAND HELLO HELLO 
    <div class="date">
      <time>
      12 november 1865
      </time>
    </div>
  </div>
</div>