样式未应用于 div 而它位于不同的

Question

我有以下款式

.MapField {
    width:70px;
    height:70px;
}
.MapTab
{
    width:auto;
    height:auto;
}
div[worldTexture="1"] {
    background:url(../WorldTextures/dirt.jpg);
}

然后我有以下html片段

<div class="col-xs-9 MapTab">
  <div class="col-xs-6 MapField" worldTexture="1"/>
  <div class="col-xs-6 MapField" worldTexture="1"/>
</div>
<div class="col-xs-3"></div>

然后我希望 col-xs-6 的高度至少为 70px（如果屏幕尺寸允许的话），但它会导致 div 的尺寸类似于 width:70px height:1px ] 将 .MapStyle 更改为 width 和 height !important 不会改变任何内容

另一方面，如果我按以下方式将 div 的用法更改为 table

td[worldTexture="1"] {
    background:url(../WorldTextures/dirt.jpg);
}

<table>
<tr class="col-xs-9 MapTab">
  <td class="col-xs-6 MapField" worldTexture="1"/>
  <td class="col-xs-6 MapField" worldTexture="1"/>
</tr>
<tr class="col-xs-3"></div>
<table>

它按预期工作，知道这里可能出了什么问题吗？

Answer 1

我认为那些 div 不应该是 self-closing 标签。

尝试

<div class="col-xs-9 MapTab">
  <div class="col-xs-6 MapField" worldTexture="1"></div>
  <div class="col-xs-6 MapField" worldTexture="1"></div>
</div>
<div class="col-xs-3"></div>

样式未应用于 div 而它位于不同的

style is not applied on div while it's on different one

html

css

bootstrapper