0

基本的に私が欲しいのは、コンテンツの中央に垂直に配置され、三角形に基づく明示的な測定値を使用せずにコンテンツの右側にわずかにパディングされた CSS 三角形ですborder-width。

この例のように三角形が巨大な場合、ラッパーは CSS 三角形を含むように展開する必要があり、CSS 三角形は常にラッパーの中央に垂直方向に配置する必要があります。大量のテキストがある場合、CSS Triangle は、テキストが交差する場合にテキストをオーバーラップする必要があります。

これは完全に理にかなっているように思えますが、いくつかの問題に遭遇しました。私が今いる場所については、このJsFiddleをチェックしてください。

を割り当てるとmin-height、以下に到達でき1.ます。問題1.は、任意の高さを選択する必要があることです。さらに、コンテンツが大きくなると、top: 25%真の中央に配置されないため、垂直方向に完全に中央揃えにはなりません。複数の異なるサイズの矢印を簡単に許可するために、min-height や任意の高さを割り当てたくありません。そのサイズを独自に計算したいだけです。

またoverflow: hidden、スクロールバーが表示されないようにするために を使用する必要がありました。これを行うright: -45pxと、CSS Triangle ボックスの「右側」が押し出されるため、overflow: visibleどこでも使用できません。

固定高さを削除すると、最終的には2.

明示的な高さやその他の明示的な測定値を使用せずにこれを行うことは可能ですか? 垂直方向に正しく配置するにはどうすればよいですか？jQuery を使用して幅などを取得するアイデアがあれば、それも結構です - タグ付けしました。

CSS トライアングル画像

4

3 に答える 3

2

position: relative;ホワイトボックスコンテナにセット。

position: absolute;50% の頂点と三角形margin-top:の半分の高さの三角形に設定します。

これにより、三角形が常に中央にあることが保証されます。

于 2013-10-09T13:49:43.507 に答える
2

以下は、div に arrowBox クラスを割り当てた後、ハードコーディングされた高さを取り除くための jQuery です。

$(document).ready(function(){
  $(".arrowBox").each(function(){
    var border = $(this).height()/4;
    var right = "-"+(border-5)+"px";
    $(this).find(".arrow").css("border-width",border).css("right",right);
  });
});

http://jsfiddle.net/wzzRC/1/

そうは言っても、純粋な CSS ソリューションの難しさは、border-width を % で指定できないことです。そのため、純粋な CSS では、他のソリューションのいずれかを使用して、矢印を収容するためにボックスを強制的に拡大します。小さいボックスで動作する矢印が必要な場合は、JS が必要です。

于 2013-10-09T14:23:46.687 に答える
1

三角形の CSS を次のように変更します。

top: 50%;
margin-top: -50px;

http://jsfiddle.net/QuwEc/4/

于 2013-10-09T13:48:45.907 に答える