Question

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

Answer 1

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

您正在显示表格数据 - 因此请使用表格。您可以使用tbody标记来避免嵌套表格，如this similar question所示：

对于此解决方案，您要做的是创建一个表。每个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"，则可能会获得更多答案。

Answer 2

这是一种在不使用aboslute定位（容易破坏）的情况下做你想要做的事情的方法。

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

基本上，使用内联块可确保在CSS不正确时元素不会重叠。但是，解决问题的最佳方法就是使用表格。对于这样的情况，存在表格，带有标签/值系统。

Answer 3

或者你可以通过浮动完成它。示例通过演示显示。

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

Answer 4

我更喜欢使用跨越跨度的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>

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;    
}

Answer 5

嘿，你可以像这样做

<强>的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/

使用表头在左侧而不是在顶部显示表格数据

5 个答案: