1

我的 CSS 有问题。我试图在 2 列中显示信息，由 .left 和 .right 类表示。

你可以在我的 jsFiddle 看到问题

4

5 回答 5

1

编辑：根据评论改变答案。

您正在显示表格数据 - 所以使用表格。您可以通过使用tbody标记来避免嵌套表，如以下类似问题所示：

对于此解决方案，您要做的是创建一个表。每个 TBODY 将代表一个“组”数据。在每个组中，第一列将用于元数据（如 thead），第二列将是实际数据： 

<table>
  <tbody> <!-- First Set of Data -->
    <tr>
      <td> Sessions </td>
      <td> 1 </td>
    </tr>
    <tr>
      <td> Date </td>
      <td> 1/1/2003 </td>
    </tr>
    ...
  </tbody>
  <tbody>  <!-- Second set of Data -->
    <tr>
      <td> Sessions </td>
      <td> 5 </td>
    </tr>
    ...
  </tbody>
</table>

然后，您可以使用外部样式表更轻松地设置样式，可能使用:nth-child选择器和/或colgroup标记或 Javascript。

如果您将问题重命名为"How to display tabular data with left hand column as key".

于 2012-04-18T19:39:09.233 回答
1

这是一种在不使用绝对定位（容易断裂）的情况下做你想做的事情的方法。

http://jsfiddle.net/WSEH4/33/

基本上，使用 inline-blocks 可以保证如果 CSS 不正确，元素不会重叠。但是，解决您的问题的最佳方法就是使用表格。对于这种情况，存在带有标签/值系统的表。

于 2012-04-18T19:41:00.343 回答
1

或者，您可以通过浮动来完成。通过演示显示的示例。

http://jsfiddle.net/WSEH4/36/

于 2012-04-18T19:43:07.993 回答
1

我更喜欢在跨度上使用 div：（jsFiddle：http: //jsfiddle.net/WSEH4/44/）

HTML：

<!DOCTYPE html>


<head>
    <title>My Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>
    <div style="display: block;">
        <div class="child">Where</div>
        <div class="child">China</div>
        <div class="clear"/>

        <div class="child">Voltage</div>
        <div class="child">220 V</div>
        <div class="clear"/>

        <div class="child">Frequency</div>
        <div class="child">50 HZ</div>
        <div class="clear"/>

        <div class="child">Plug Type</div>
        <div class="child">USA</div>
        <div class="clear"/>
    </div>
</body>

​</p>

CSS：

.child
{
    float: left;
    top: 6px;
    left: 6px;
    width: 25%;
    padding-right: 10px;
    white-space: nowrap;
    border-bottom: 1px solid #eee;
}

.clear
{
    clear: both;
    display: block;    
}

​</p>

于 2012-04-18T19:43:10.387 回答
1

嘿，你可以这样做

CSS

div{
margin-top:10px;
}
.right{
float:left;
    width:50%;
border-right:solid 1px red;    
}
.left{
    float:right;  
}

HTML

<div style="display: block;width:200px;overflow: hidden;">

    <div class="right">China</div>
    <div class="left">Plug Type</div>

    <div class="right">220 V</div>
    <div class="left">Frequency</div>

    <div class="right">50 HZ</div>
    <div class="left">Voltage</div>

    <div class="right">USA</div>
    <div class="left">Where</div>



</div>

现场演示http://jsfiddle.net/rohitazad/WSEH4/52/

于 2012-04-19T08:49:12.263 回答