0

このような2行があるとしましょう。

Some Label: First element
            Second element

2 行目は、最初の要素に合わせてインデントされます。

これは、テーブルを使用して簡単に行うことができます。

<table>
  <tr>
    <td rowspan="2">Some Label:</td>
  </tr>
  <tr>
    <td>First element</td>
    <td>Second element</td>
  </tr>
</table>

しかし、私はアライメントに使用したくありません。

<div>
  <span>Some Label:</span>
  First element
</div>
<div>
  Second element
</div>

制限: Some Label の長さは不明です。したがって、ハードコードされた幅は使用できません。

ありがとう。

サム

4

1 に答える 1

1

HTML を次のように変更すると、次のようになります。

<div class="row">
    <div class="header">Some Label:</div>
    <div class="labels">
        <div>First element</div>
        <div>Second element</div>
        <div>Third element</div>
    </div>
</div>​

この CSS は問題なく動作します。

.row {
    display: inline-block;
}

.header {
    float: left;
    margin-right: 5px;
}

.labels {
    float: right;
}

デモ: http://jsfiddle.net/Ludww/1/

于 2012-10-11T17:57:38.300 に答える