下端に境界線とボタンがある高さの列

私は数日間この権利を取得しようとしていましたが、私はできません。下端に境界線とボタンがある高さの列

私のシナリオはこれです：私は同じ高さの3つの列が必要です。それらの間には境界線が必要です。左の列は他の2つのコンテンツより少し多くのコンテンツを持ち、他の2つはボタンの下端（左下の列のコンテンツが終わるところに下端がくるように配置されています）が必要です。ここで

は、私が何を意味するかを示した画像です：http://img217.imageshack.us/img217/6400/49593032.png

私は私がしようとするまで、素晴らしい作品これは負のマージンボトムハック均等巨大な - しかし、巨大なパディングボトムと、試してみましたボタンを下に移動します。最初は、ボタンと位置の絶対位置を使用しようとしましたが、コンテナ上の相対位置ですが、コンテナのオーバーフローが必要なため、ボタンを非表示にしてコンテナの下部に配置します（これは約32767ピクセルです巨大な詰め物）。

私はボタンを置いた2番目の行を追加しながら上記のハックを試してみました。それのセマンティクスはあまり意味がないという事実の他に、このメソッドはそれによって左の列の内容下って行くことはありません。ハックはオーバーフローを必要としたので、2番目の行を押し上げるために負のマージンを使用する隠された試みはうまくいかなかった。

私はここにこだわっています。偽の列は私を助けず、javascriptはオプションではありません。あなたならどうしますか？

出典

2010-11-26 Johan

私はなぜjavascriptはオプションではないのですか？ – benhowdle89

それは最後の手段かもしれませんが、私の上司はJavaScriptをオフにして（可能な限り）同じように見えるようにします。 – Johan

このケースでは本当に好きではありませんが、少なくとも1つの解決策はテーブルを使用することです。最初の列のテキストの高さは他のセルの高さを強制し、セル内の相対的な配置（divを使用）を使用して、ボタンを下に配置することができます。

は

出典

2010-11-26 12:33:25 Tom

最後の手段として機能するはずです。 – Johan

使用A一覧ApartのHoly Grail [コード---なく、あなたの正確な要件についてはよく分から100％を削除]絶対にボタンを配置します。

出典

2010-11-26 12:59:48

これは私がすでに試したのと同じ解決策と思われ、うまくいくはずです。右：私のコラムは24emの幅広い設定権を持っていますが、私はそれはすべきだと思うので、プロパティは機能していないようです.24emにはまだボタンが右の列に置かれます。 – Johan

divの絶対配置を使用して、その中にボタンを絶対配置することができます。このコードを試してみてください：

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<style type="text/css"> 
    body { height: 100%; margin: 0; } 
    .col { 
    width: 33%; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    border: 1px solid #000; 
    background: blue; 
    position: absolute; 
    } 
    .left { left: 0; } 
    .mid { left: 33.33%; } 
    .right { left: 66.66%; } 
    .button { position: absolute; bottom: 0; right: 0; } 
</style> 
</head> 
<body> 
<div class="col left"> 
    sdgfiods ajgodsai jngfio nmsadogf nikod sangf sfdsg fdsg 
</div> 
<div class="col mid"> 
    sdgfiods ajgodsai jngfio nmsadogf nikod sangf sfdsg fdsg 
    <button class="button">click me</button> 
</div> 
<div class="col right"> 
    sdgfiods ajgodsai jngfio nmsadogf nikod sangf sfdsg fdsg 
    <button class="button">click me</button> 
</div> 
</body> 
</html>

出典

2010-11-27 08:35:06 Bazzz

グリッドライブラリを使用しているので、コンテナ内に列を配置する必要があるまでは、うまく動作しているようです。どんな考え？ – Johan

コンテナの高さを指定する必要があります。それ以外の場合はdivの下限を指定します.0は、どれくらいのスパンを計算することができません。私の例では身体の高さは100％ですが、あなたの容器には高さがありませんか？ – Bazzz

下端に境界線とボタンがある高さの列

答えて

関連する問題