html - 使用 div 制作不同尺寸的表格

Question

我想在 DLE 上的 4 个单元格中显示 5 个评分元素。这是我现在拥有的:

<table width=100%>
<tr>    
   <td width=10%>
   <div class="custom-data"> Score IMDB</div>
   </td>
   <td>
        <div class="custom-data">Score Users</div>
        <div class="custom-data">Stars</div>
   </td>  
</tr>

<tr>
   <td>IMDB</td>
   <td>Users</td>
</tr>

</table>

这应该是这样的

Score IMDB | Score Users *****
   IMDB    |   Users

我在第一列中定义了宽度。我想在中间做一个边框来分隔分数，但是我不能用表格做，对吗？

ul li 标签把星星弄乱了。我唯一的方法是做一个 div。

你能帮我写代码来制作这个结构吗？

Answer 1

这个怎么样:

HTML

<div class="left">Score IMDB</div><div class="right">Score Users *****</div>
<div style="clear:both;"></div>
<div class="left">IMDB</div><div class="right">Users</div>

CSS

.left, .right { display:inline-block; margin:5px 0; }
.left { border-right:1px solid #000; width:90px; padding:4px; }
.right { padding:4px 4px 4px 10px; } 

这里的“魔法”真正在于 display:inline-block，它允许我们将 div 彼此相邻放置。希望这对您有所帮助!

DEMO.

注意事项

由于您希望右边的第二列具有动态宽度，因此居中文本的效果(就像您在描述您想要的内容时所具有的效果)在右边的列中将不可见。如果您仍希望对左列产生这种效果，请将此代码添加到 .left:

text-align:center;