如何将两个 div 并排放置在 table td 中

詹妮弗

下面是我的 html 和 css 代码。我需要将divs 放在表格的单元格中td。div "infoY" 应该显示在 "outerY" div 之后。

 <td>
<div class="outerY"> <div class="yellow"></div> <div class="yellow"></div> <div class="yellow"></div> <div class="yellow" style="margin-right: 3px;"></div> </div><div class="infoY"></div></td>

VSM

显示：inline-flex；会解决你的问题

.outer {
    display:flex;
    flex-wrap:wrap;
}
.infoY {
  display:flex;
} 


Y{
    border: 3px solid #ffc107;
    height: 20px;
     background: #ffc107;
}
.outerY {
    margin-top: 0%;
    border: 3px solid #ffc107;
     width: 74px;
     height: 31px;
     display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
     padding: 2px;
    border-radius: 8px;
     position: relative;
}
 .yellow {
    background-color: #ffc107;
    height: 100%;
    -webkit-box-flex: 1;
    flex: 1;
    border-radius: 1px;
     margin-left: 4px;
}

<td>
  <div class="outer">
    <div class="outerY">
      <div class="yellow">1</div>
      <div class="yellow">2</div>
      <div class="yellow">3</div>
      <div class="yellow">4</div> 
    </div>
    <div class="infoY">11</div>
  </div>
</td>

https://jsfiddle.net/Sampath_Madhuranga/m8eakoqp/13/

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。