在没有 Flexbox 的情况下将元素定位在一行中

Question

我需要在一行中将元素 B 放在元素 B 旁边，以便元素 B 及其边框底部跨越左侧的整个空间，并且元素 A 的宽度预先未知。

我尝试在 B 上使用

display: inline-block

但随后它会弹出到下一行，并且仅使用

display: inline

我无法将其底部边距跨度到屏幕右侧

附有Codepen：https://codepen.io/bbluszcz/pen/Xyywqx?editors=1100

重要的是，由于某些原因我无法使用flexblox

.a {
  display: inline;
  padding: 4px;
}
.b {
    display: inline-block;
/*       display: inline; */
    width: 100%;
    border-bottom: 1px dashed green;
}

<div class="a">  Element A :</div>
<div class="b">  Element B </div>

Answer 1

有几种方法可以做到这一点，最简单的方法之一可能就是使用表格。请注意

white-space: nowrap

或多个单词将换行到下一行。

.a {
    padding: 4px;
    white-space: nowrap;
}
.b {
    width: 100%;
    border-bottom: 1px dashed green;
}
<table>
   <tr>
      <td class="a">  Element A :</td>
      <td class="b">  Element B </td>
   </tr>
</table>

Answer 2

这取决于您使用的内容，即您是否正在使用网格设计容器的样式 并且您想要设置具有图像或图标的容器内的 div 的样式，例如：

<div class="container">
  <div class="left"> 
   <div class="row">
     <img class="one" src="images\hebergements\4_small\marcus-loke-WQJvWU_HZFo-unsplash.jpg" />
     <img class="two" src="images\hebergements\4_small\annie-spratt-Eg1qcIitAuA-unsplash.jpg" />
     <img class="three" src="images\hebergements\4_small\febrian-zakaria-/>
   </div>
  </div>
</div>

CSS：

.container {
  display: grid;
  grid-template-areas: 
    "left left right"
    "left left right"
    "bottom bottom bottom"
  ;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
}

.left {
  grid-area: left;
}
   
img {
  display:block;
  width: 110px;
  height: 100px;
}