Html 在内联div中嵌套tds会导致渲染问题吗?
在桌面上,我将div设置为显示为表格单元格,但在移动设备上将其更改为内联块。我选择使用桌面上的表格单元格,以便所有并排的块都具有相同的高度,而不考虑其内容的高度。我想使用同样的表格单元方法来计算移动设备和桌面之间的窗口大小间隔,但我想用分隔符并排显示两个块(而不是用三个分隔符并排显示四个块)。我想知道在每对“responsiveelements”周围放置一个div,并将每个div设置为inline for desktop是否会导致页面呈现方式与不存在时不同。如果我没有弄错的话,我应该能够完成我想要的,如果这不会引起问题的话Html 在内联div中嵌套tds会导致渲染问题吗?,html,css,Html,Css,在桌面上,我将div设置为显示为表格单元格,但在移动设备上将其更改为内联块。我选择使用桌面上的表格单元格,以便所有并排的块都具有相同的高度,而不考虑其内容的高度。我想使用同样的表格单元方法来计算移动设备和桌面之间的窗口大小间隔,但我想用分隔符并排显示两个块(而不是用三个分隔符并排显示四个块)。我想知道在每对“responsiveelements”周围放置一个div,并将每个div设置为inline for desktop是否会导致页面呈现方式与不存在时不同。如果我没有弄错的话,我应该能够完成我想
@介质(最大宽度:1199px){
.响应元素{
宽度:100%!重要;
边距:0 0 20px!重要;
显示:内联块!重要;
}
.响应表{
显示:块!重要;
边距:0!重要;
}
.细胞分割器{
显示:无;
}
}
.细胞分割器{
显示:表格单元格;
}
.响应元素{
显示:表格单元格;
宽度:23.5%;
}
如果我理解正确,那么这应该是可行的: HTML 基本上,将所有“单元格”按2分组,并将换行渲染为
内联块
元素,该元素允许“单元格”连接在一行中。当设备处于移动状态时,换行将呈现为块,将下一个换行带到换行符。不幸的是,据我所知,没有唯一的CSS方法可以做到这一点
编辑:简言之,否:p您走在正确的轨道上谢谢你的帮助!似乎解决我的问题最简单的方法是将“table2”div设置为display:contents。
<div>
<div class='mobile_tr'>
<div class='td'>Text</div>
<div class='td'>Text</div>
</div>
<div class='mobile_tr'>
<div class='td'>Text</div>
<div class='td'>Text</div>
</div>
</div>
div {
display: table
}
.mobile_tr {
display: inline-block;
}
.td {
display: table-cell;
}
@media (max-width: 1199px) {
.mobile_tr {
display: block;
}
}