html - CSS レイアウト ボタン/テキストのトラブル

Question

レイアウトに問題があります - これを描いてください：

テキストが入った丸みを帯びた灰色のボックスと、その中に 2 つのボタンがあります。

灰色のボックスはページの幅 (約 900px) で、ボタンはそれぞれ 250px です。

テキストの幅は 300px です。

2 つのボタンを右に配置し、テキストを左に配置します。

これは私の基本的なレイアウトです:

<div id="grey_box">

<p class="text"></p>

<div class="buttons">

<a class="button1"></a>

<a class="button2"></a>

</div>

</div>

何らかの理由で、テキストは常にボタンの上に表示されます。すべてのテキストをボックスの中央 (垂直方向) に配置したいのですが、灰色のボックスの高さは約 80px です。

これが私のCSSです：

#grey_box {
    height: 80px;
    background: #f4f4f4;    
    width: 900px;
    margin: 0 0 20px 20px;
}

.text {
    float: left;
    width: 450px;
}

.buttons {
    float: right;
    margin-right: 20px; 
    width: 450px;
}

その下には、私が欲しいものの大まかな考えがあります。

Answer 1

問題は、合計幅がコンテナーの幅を超えているため、ボタンが段落の下の次の行にジャンプすることです。幅を計算するときは、ボーダー、マージン、およびパディングを考慮する必要があります。

この修正された jsFiddle の例を参照してください

#grey_box {
    height: 80px;
    background: #f4f4f4;
    width: 900px;
    margin: 0 0 20px 20px;
}
.text {
    float: left;
    width: 350px;
}
.buttons {
    float: right;
    margin-right: 20px;
    width: 450px;
    padding:20px;
    text-align:right;
}

Answer 2

あなたの考えは正しいのですが、要素がコンテナに対して広すぎます。特定のサイズのコンテナー内で要素を垂直方向に中央揃えにする最も簡単な方法は、display: tableプロパティを使用することです。

http://tinker.io/e4409/1

#grey_box {
    height: 80px;
    background: #f4f4f4;    
    width: 900px;
    margin: 0 0 20px 20px;
    display: table;
}

.text {
    display: table-cell;
    vertical-align: middle;
    width: 450px;
}

.buttons {
    display: table-cell;
    vertical-align: middle;
    margin-right: 20px; 
    /*text-align: right;*/
}

Answer 3

これは、ボタン div の幅が 450 ピクセルで、右に 20 ピクセルの余白があるためです。使用可能なスペース: 900px では不十分です。これは、灰色のボックスに 450+450+20 ピクセルのスペースが実質的に必要であるためです。また、ボタンはそれぞれ 250px であるため、500px のスペースが必要です。灰色のボックスの幅を 1000 に増やすか、ボタン div のサイズを大きくしてテキスト div のサイズを小さくしてみてください。

または、テーブルを使用して、これらを個別のテーブル セルにフォーマットすることもできます。

<table>
<tr>
<td align=left width=300> Text here</td>
<td align=right width=250> Button 1</td>
<td align=left width=250> Button 2</td>
</tr>
</table>