0

現在、特定の方法で div 構造を提示するのに苦労しています。残念ながら、私たちのデータベース システムは html を出力するため、css 経由でしかこれを行うことができません。基本的に、以下のコードを図に示す形式で提示しようとしています。

<div class="job_classifications">
    <div class="classification x_location">
       <div class="class_type">Location</div>
       <div id="location" class="class_value"> London</div>
    </div>

     <div class="classification refno">
       <div class="class_type">Ref No</div>
       <div class="class_value">80</div>
    </div>

クラス タイプは左側の暗い見出しを参照し、class_value はコンテンツを参照します。

css を介してこれを達成する方法の推奨事項はありますか? どんな助けでも大歓迎です。JQuery と JavaScript を使用して、必要に応じて必要に応じてクラスを追加できます。

ここに画像の説明を入力

4

3 に答える 3

2

http://jsfiddle.net/NVDjU/

アップロードされた画像を例として使用すると、この方法ではフロートと変更可能な任意の幅が使用されますが、うまくいく場合があります。

.job_classifications {
    width: 420px;
    font-size: 11px;
    font-family: Arial;
}

.classification {
    float: left;
}

.classification .class_type {
    font-weight: bold;
    width: 80px;
    float: left;
}

.classification .class_value {
    float: left;
    margin: 0 10px 0 0;
    width: 100px;
}
于 2012-11-16T15:50:30.090 に答える
0

上記のように、彼らが提供するマークアップに行き詰まる可能性が高い場合は、display:table* を使用できますが、IE8 より前をサポートする必要がある場合は、古いブラウザーに注意する必要があります。

与えられた:

<div class="job_classifications">
    <div class="classification x_location">
       <div class="class_type">Location</div>
       <div id="location" class="class_value"> London</div>
    </div>

     <div class="classification refno">
       <div class="class_type">Ref No</div>
       <div class="class_value">80</div>
    </div>
</div>​​​​​​​​​

次のように css を使用できます。

.job_classifications {
    display:table;
    border: 1px solid green;
}

.classification, .class_type, .class_value {
    display:table-cell;
    border: 1px solid blue;
}

明らかに、境界線のスタイルは要点を説明するためのものです...

display: table を読んで、必要な場所に到達するかどうかを確認してください。 http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/

(例 jsFiddle: http://jsfiddle.net/mori57/SguEb/ )

于 2012-11-16T15:35:44.137 に答える
0

私が考えることができる最高のものは次のようなものです：

​.class_type{
float:left​;
font-weight:bold;
background-color:#DDD;
width:125px;
}
.class_value{
float:left;
background-color:#FFF;
width:125px;
}
.job_classifications{width:250px;}

http://jsfiddle.net/calder12/G29nU/

ここには明らかに継承の問題があります。これは、フロートに幅を設定して線を強制的に分割させることに基づいているためです。

  • まず、すべてのデータが job_classifications div 内にある場合、1 つの列しか取得できません。
  • データが固定幅を超えた場合、このレイアウトはそれをカットします。
于 2012-11-16T15:44:26.217 に答える