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;
}

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

2 个答案: