我想要 .div 容器而不是表格，我该怎么做？答案

【问题标题】：I would like to have .div containers instead of tables, how do I do that?我想要 .div 容器而不是表格，我该怎么做？
【发布时间】：2016-06-24 15:54:52
【问题描述】：

我的代码：https://jsfiddle.net/5L3ayxrs/3/

谁能告诉我如何取出表格并用 div 标签替换它们？我一直在搜索和搜索，但我尝试过的任何方法都没有奏效。将不胜感激。提前谢谢你。

谁能给我看我在 .div 容器中的代码，因为我已经在这几个小时了，我无法让它工作。

<table align='center'>
  <tr>
    <td valign='middle'>
      <table>
        <tr>
          <td style='color: #0059dd;line-height:1;font-size:30px;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 100px; padding-left: 50px;'>
            Radio 1
            <br>
            <span style='display:block; width: 300px; height: 24px; background-color:#E2AB58'></span>
          </td>
          <td style='color: #0059dd;line-height:1;font-size:30px;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 100px; padding-left: 50px;'>
            Radio 2
            <br>
            <span style='display:block; width: 300px; height: 24px; background-color:#E2AB58'></span>
          </td>
          <td style='color: #0059dd;line-height:1;font-size:30px;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 100px; padding-left: 50px;'>
            Radio 3
            <br>
            <span style='display:block; width: 300px; height: 24px;background-color:#E2AB58'></span>
          </td>
        </tr>
        <tr>
          <td style='color: #0059dd;line-height:1;font-size:30px;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 100px; padding-left: 50px;'>
            Radio 4
            <br>
            <span style='display:block; width: 300px; height: 24px; background-color:#E2AB58'></span>
          </td>
          <td style='color: #0059dd;line-height:1;font-size:30px;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 100px; padding-left: 50px;'>
            Radio 5
            <br>
            <span style='display:block; width: 300px; height: 24px; background-color:#E2AB58'></span>
          </td>
          <td style='color: #0059dd;line-height:1;font-size:30px;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 100px; padding-left: 50px;'>
            Radio 6
            <br>
            <span style='display:block; width: 300px; height: 24px; background-color:#E2AB58'></span>
          </td>
        </tr>
        <tr>
          <td style='color: #0059dd;line-height:1;font-size:30px;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 0px; padding-left: 50px;'>
            Radio 7
            <br>
            <span style='display:block; width: 300px; height: 24px; background-color:#E2AB58'></span>
          </td>
          <td style='color:#0059dd;line-height:1;font-size:30px;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 0px; padding-left: 50px;'>
            Radio 8
            <br>
            <span style='display:inline-block; width: 300px; height: 24px;background-color:#E2AB58'></span>
          </td>
          <td style='color: #0059dd;line-height:1;font-size:30px;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 0px; padding-left: 50px;'>
            Radio 9
            <br>
            <span style='display:block; width: 300px; height: 24px;background-color:#E2AB58'></span>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

【问题讨论】：

抱歉，您的问题完全不清楚。显然，如果您想替换由div 容器实现的表，那么就这样做。那么您的真正问题是什么？
就是这样，div 容器，我需要帮助。
所以你想要的只是替换所有的<td> / <tr> <table>为divs？你为什么不喜欢.. replace names ？
你能告诉我我该怎么做吗？
<div>your content</div>。而已。 developer.mozilla.org/en-US/docs/Web/HTML/Element/div

标签： html css

【解决方案1】：

https://jsfiddle.net/b7pmxmhh/ 即便如此......您可能想查看百分比，甚至将它们更改为实际像素

<style>
.col { width: 40%; float: left; color: #0059dd;line-height:1;font-size:30px;font-weight:bold;padding: padding-top: 0px; padding-bottom: 100px; padding-right: 10%; }
.col span {display:block; width: 300px; height: 24px; background-color:#E2AB58;}
</style>
<div class="col">
  Radio 1
  <span></span>
</div>
<div class="col">
  Radio 2
  <span></span>
</div>
<div class="col">
  Radio 4
  <span></span>
</div>
<div class="col">
  Radio 5
  <span></span>
</div>
<div class="col">
  Radio 7
  <span></span>
</div>
<div class="col">
  Radio 8
  <span></span>
</div>

【讨论】：