时间戳

首页 > 解决方案 > 如何在表 td 中将两个 div 并排放置

html - 如何在表 td 中将两个 div 并排放置

问题描述

下面是我的 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>

标签： htmlcss

解决方案

用于 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>

推荐阅读