html - 使用 html/css 重建此图的最佳方法

Question

我有这些（简单的）问题。我想用html/css重建下图

http://s1.directupload.net/file/d/3429/iunjflkr_png.htm

我的建议1（只是没有任何css格式的伪代码）：
div中的表

<div>
  <table>
    <tr>
     <td>blue</td>
     <td>headline</td>
     <td>
       <input type="radio" ..><input type="radio" ..>
     </td>
    </tr>
   </table>
</div>

我的建议2（只是没有任何css格式的伪代码）：
div中的div

<div>
  <div>blue</div>
  <div>headline</div>
  <div>
    <input type="radio" ..><input type="radio" ..>
  </div>
</div>

我的建议之一可用还是有其他（更好）合适的解决方案？

Answer 1

您应该<table>仅用于表格数据。如果不是，它在语义上是不正确的。

你的情况对我来说似乎不是表格数据，所以我建议你使用divs 或spans。

或者，如果你认为它是一个列表，你也可以使用

<li>
    Wird das Merkmal zweiseitig toleriert?
    <ul>
        <li>ja</li>
        <li>nein</li>
    </ul>
</li>

Answer 2

你可以只使用 div 和一些 css 来做到这一点。正如 Oriol 所说，避免在这里使用 table。这是一个示例代码：

HTML 代码：

<div>
  <div class='MainBar'>
   <div class='arrow'></div>
   <div class='text'>
     <p>text goes here</p>
   </div>
   <div class='ja'>
     <p>Ja</p>
   </div>
   <div class='nein'>
     <p>Nein</p>
   </div>
  </div>
</div>

和CSS代码：

.MainBar{
width: 990px;
max-width: 990px;
height: 80px;
border: 1px solid GREY;
}

.arrow{
width: 110px;
height: 80px;
background-color: #5B9BD5;
float: left;
}

.text{
width: 660px;
height: 80px;
float: left;
}

.ja{
width: 110px;
height: 80px;
background-color: #5B9BD5;
float: left;
}

.nein{
width: 110px;
height: 80px;
background-color: #D8D8D8;
float: left;
}