1

CSS に問題があります。.left クラスと .right クラスで示される 2 列に情報を表示しようとしています。

私のjsFiddleで問題を見ることができます

4

5 に答える 5

1

これは、絶対配置を使用せずに、実行しようとしていることを実行する方法です (これは壊れやすい)。

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

基本的に、インライン ブロックを使用すると、CSS が正しくない場合に要素が重複しないことが保証されます。ただし、問題の最善の解決策は、代わりにテーブルを使用することです。このような状況のために、ラベル/値システムを備えたテーブルが存在します。

于 2012-04-18T19:41:00.343 に答える
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 に答える
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

編集:コメントに基づいて回答を変更します。

表形式のデータを表示しているので、テーブルを使用してください。この同様の質問で示されているように、 tbodyタグを使用してネストされたテーブルを回避できます。

このソリューションでは、テーブルを作成します。各 TBODY は、データの 1 つの「グループ」を表します。各グループで、最初の列はメタデータ (thead など) 用になり、2 番目の列は実際のデータになります。 

<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 に答える