如何在表td中彼此相邻放置两个div

Question

下面是我的html＆css代码。我需要将div放在表格的单元格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>

Answer 1

使用display:flex来吸引td

编辑！我从注释中添加了OP的CSS代码

.infoY{
border: 3px solid #ffc107;
height: 20px; 
background: #ffc107;
}
.outerY {
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, th {
  
border: 1px solid #dddddd;

}
.flex{
display:flex
}

<table>
  <tr>
    <th>x</th>
    <th>y</th>
  </tr>
  <tr>
    <td class="flex">
    <div class="outerY">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">infoY</div>
     </td>
    <td>Maria Anders</td>
  </tr>
 
</table>

Answer 2

display：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/