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

詹妮弗

下面是我的 html 和 css 代码。我需要将divs 放在表格的单元格中tddiv "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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何使用bootstrap3将两个图像并排放置到div中?

来自分类Dev

在React中每div并排放置2个元素

来自分类Dev

将div并排放置在twitter引导轮播中

来自分类Dev

将div并排放置在twitter引导轮播中

来自分类Dev

将div并排放置在父级中?

来自分类Dev

如何在固定宽度div中并排放置图像

来自分类Dev

如何在wordpress中并排放置两个div

来自分类Dev

如何在HTML页面中并排放置两个div

来自分类Dev

如何在wordpress中并排放置两个div

来自分类Dev

如何将div并排放置在一个框中以进行货币输入

来自分类Dev

HTML将两个div并排放置

来自分类Dev

如何将两个父div并排放置?

来自分类Dev

如何并排放置两个div

来自分类Dev

如何使用CSS并排放置两个div

来自分类Dev

如何将两个容器并排放置在引导程序中?

来自分类Dev

如何将两个容器并排放置在引导程序中?

来自分类Dev

将两个textview并排放置在布局中

来自分类Dev

无法在另一个div中并排放置2个div

来自分类Dev

不带包装的两个DIV并排放置

来自分类Dev

CSS:不能将两个div并排放置

来自分类Dev

CSS:如何在主div中并排放置子div

来自分类Dev

在包装器中并排放置2个div时遇到问题

来自分类Dev

在包装器中并排放置2个div时遇到问题

来自分类Dev

如何将我的 2 个 div 并排放置?

来自分类Dev

如何将这些div并排放置

来自分类Dev

如何在IPython Notebook中并排放置“ input”和“ output_wrapper” div

来自分类Dev

如何在IPython Notebook中并排放置“ input”和“ output_wrapper” div

来自分类Dev

如何将图像并排放置在重组文本中?

来自分类Dev

并排放置div