CSS:在没有flexbox的情况下将元素定位在一行中

Question

男生需要一些定位元素。

我需要在元素B旁边有一行元素B，这样元素B和它的边界底部就横跨了剩下的整个空间，而元素A的宽度在前面是未知的。

我试过在B上使用display: inline-block，但它会弹出到下一行，如果只有display: inline，我就无法将其下边距跨度设置在屏幕右侧的

随附代码笔：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="imageshebergements4_smallmarcus-loke-WQJvWU_HZFo-unsplash.jpg" />
<img class="two" src="imageshebergements4_smallannie-spratt-Eg1qcIitAuA-unsplash.jpg" />
<img class="three" src="imageshebergements4_smallfebrian-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;
}