css - CSS 複数行ラベルの整列

Question

2 つのラベルを下揃えに揃えるにはどうすればよいですか。1 つのラベルに複数の行がある場合は、その隣のラベルが上から表示されます。下に合わせていいですか？

http://jsfiddle.net/ghkJC/3/

<div class="field">
  <div class="label">labl 1:</div>
  <div class="value">Some text</div>
  <br />
  <br />
</div>

<div class="field">
  <div class="label">this is a really really long label:</div>
  <div class="value">right after":" from previous label</div>
  <br />
</div>

.label {
    background: purple;
    float: left;      
    width: 100px;
    display: inline;
    vertical-align: 500px;

}

.value {
    background: red;
    width: 300px;
    float: right;

}

どうもありがとう ：）

Answer 1

以下にいくつかのオプションを示します。

1. 使用display:inline-block:

   .label {
       background: purple;
       width: 100px;
       display: inline-block;
   }
   .value {
       background: red;
       width: 300px;
       display: inline-block;
       vertical-align: bottom;
   }
   

   デモフィドル

2. 使用display:tableしてtable-cell

   .field {
       display: table;
   }
   .label,.value{
       display: table-cell;
   }
   .label {
       background: purple;
       min-width: 100px;
   }
   .value {
       background: red;
       width: 100%;
       vertical-align: bottom;
   }
   

   デモフィドル

3. 使用するposition:absolute

   .field {
       position: relative;
   }   
   .label {
       background: purple;
       width: 100px;
   }
   .value {
       background: red;
       width: 300px;
       position: absolute;
       right: 0;
       bottom: 0;
   }
   

   デモフィドル

注:最初の 2 つのオプションは IE < 8 では機能しません (いくつかのハックがなければ)

Answer 2

この例では、この例を使用します css 複数行のラベルは割り当てられます

label {
    display: block;
    margin-left: 20px;
}
input {
    float: left;
    margin-left: -20px;
    margin-right: 7px;
}

Answer 3

jsfiddle

CSS

.label {
        background: purple;
        float: left;      
        width: 100px;
        display: inline;
        vertical-align: 500px;

}

.value {
        background: red;
        width: 300px;
        float: right;
}
#bor
{
    line-height:40px;
}

HTML

<fieldset>
    <div class="field">
        <div class="label">labl 1:</div>
        <div class="value">Some text</div>
        <br />
        <br />
    </div>

    <div class="field">
        <div class="label">this is a really really long label:</div>
        <div id="bor" class="value">right after":" from previous label</div>
        <br />
    </div>
</fieldset>