Question

有人可以告诉我如何拿出表格并用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>

Answer 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>

我想有.div容器而不是表，我该怎么做？

1 个答案: