Question

我有screenshot。上面的一个是使用div。下面的一个是使用表格。我尝试使上面的那个看起来类似于下面的那个，但我无处可去。

我的目标是模拟堆叠的水平条。我在网上发现了类似的CSS示例，但它不允许我在“框”中添加文本。

代码示例

br.clear {
  float: clear;
}

div.fullwidth {
  border: 1px solid black; 
  height: 40px;
  max-width: 100px;
}
div.available {
  background-color: #22BB22;
  color: #111111;
  float: left;
  font-size: 20px;
  height: 40px;
  text-align: center;
  line-height: 40px;

}
div.notavailable {
  background-color: #222222;
  color: #DDDDDD;
  float: left;
  font-size: 20px;
  height: 40px;
  text-align: center;
  line-height: 40px;

}

<div class="fullwidth" style="height: 40px;">
  <div class="available" width="50px">10</div>
  <div class="notavailable" width="50px">10</div>
  <br class="clear" />
</div>
<hr>
<table>
  <tr>
    <td style="background-color: green; width: 50px; text-align: center;">10</td>
    <td style="background-color: blue; width: 50px; text-align: center;">10</td>
</table>

Answer 1

br.clear {
  float: clear;
}

div.fullwidth {
  border: 1px solid black; 
  height: 40px;
  max-width: 100px;
}
div.available {
  background-color: #22BB22;
  color: #111111;
  float: left;
  font-size: 20px;
  height: 40px;
  text-align: center;
  line-height: 40px;

}
div.notavailable {
  background-color: #222222;
  color: #DDDDDD;
  float: left;
  font-size: 20px;
  height: 40px;
  text-align: center;
  line-height: 40px;

}

<div class="fullwidth" style="height: 40px;">
  <div class="available" width="50px">10</div>
  <div class="notavailable" width="50px">10</div>
  <br class="clear" />
</div>
<hr>
<table style="border:solid 1px #000;" cellpadding="0" cellspacing="0">
  <tr>
    <td style="background-color: green; width: 20px; height: 40px; text-align: center;">10</td>
    <td style="background-color: blue; width: 20px; height: 40px; color: #fff; text-align: center;">10</td>
    <td style="width: 60px;"></td>
</table>

Answer 2

这样的东西？

 div.fullwidth {
                /*border: 1px solid black; */
                height: 20px;
                max-width: 100px;
            }
            div.available {
                background-color: #22BB22;
                color: #111111;
                float: left;
                font-size: 20px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                width:49%

            }
            div.notavailable {
                background-color: #222222;
                color: #DDDDDD;
                float: left;
                font-size: 20px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                 width:49%;
                 border-left:2px solid #fff

            }

<强> DEMO

Answer 3

这就是我所做的：

br.clear {
  float: clear;
}

div.fullwidth {
  display: table;
}

div.available {
  background-color: green;
  color: #111111;
  text-align: center;
}

div.notavailable {
  background-color: blue;
  color: #DDDDDD;
  text-align: center;
}

.fullwidth div {
  width: 53px;
  height: 20px;
  display: table-cell;
  margin: 2px;
  border-spacing: 5px;
  border: solid 1px white;

    color:black;
}

Here is the JSFiddle demo

如何使用div模拟此表？

3 个答案: