問題タブ [equal-heights]

質問する

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

69 問題
Newest
Active
Bountied
318
Unanswered
0 投票する
1 に答える
1028 参照

javascript - 各画像の高さが同じで縦横比が維持される中央のフクロウ カルーセル

owl-carousel縦横比を失うことなく、各画像が同じ高さを持つ中心を作成する方法はありますか?

で画像サイズを計算しようとしましJS/jQueryたが、計算owl-carouselがめちゃくちゃになります。sと同じ結果CSSです。例 ( jsfiddle ):

現在のdiv/imageは

  • カルーセルの中央に、
  • 他のすべてのアイテムと同じ高さです
  • アスペクト比を維持し、
  • 前または次のアイテムと並んでいます。

要素がビューポートよりも広い場合は、切り取られるよりも十分です。

でそれを達成する方法さえありowl-carouselますか？

SOで他の同様の質問をいくつか確認しましたが、私が見る限り、それらはすべて異なる焦点を持っています:

編集：自動高さのデモを再確認しました...

使用を有効にするにはautoHeight: true. 現時点では、画面上の 1 つのアイテムでのみ機能します。計画は、表示されているすべてのアイテムを計算し、最も高いアイテムに応じて高さを変更することです。

そのようなオプションはまだないようです。

0 投票する
0 に答える
145 参照

html - 行の高さを固定値に強制する

段落全体または divの行の高さを厳密に強制する方法はありますか?

私は書籍のタイポグラフィーの正確な印刷に HTML+CSS を使用しています。行の内側に何があっても、各行の高さを実際に同じにしたいと考えています。

一般的な問題は、上付き文字またはテキストの拡大部分に関するものであり、SO に関する他のいくつかの質問で (多かれ少なかれ成功裏に) 対処されています。

ただし、これらのソリューションの問題は、それらが部分的であり、特定のケースのみを修正することです。特定の問題を修正したいのではなく、これらの問題がまったく発生しないようにしたいのです。テキスト全体にどのような種類の要素が表示されるかを事前に確認することはできないため、行が同じままであることを確認し、代わりに、問題が発生した場合に行を伸ばす必要がある特定のケースを修正したいと考えています。いくつかの要素。

したがって、以前の「ソリューション」の問題、特に:

  1. <sup>タグ ソリューションは、正しくなるまで、いくつかのサイズで手動で再生する必要があります。
  2. 2 番目のスレッドは実際には問題を解決しません。テキストの一部が十分に大きくなるとdisplay:inline-block;、overflow:hidden;との組み合わせでは対応できなくvertical-align:top;なり、最終的には線が伸びてしまいます。

私が試したこと：

要するに、この JSFiddleを参照してください。

これらの CSS ルールのすべての組み合わせを適用してみました。

  • display: inline-block;（または単にinline）
  • overflow: hidden;
  • vertical-align: top;
  • line-height: 1px;

ただし、テキスト サイズを十分に大きくしても、線が大きくなります。また、画像を追加すると (たとえば、通常の線の高さより 1 ピクセルだけ高いグラフィカルなスマイリー)、線が再び大きくなります。

私が欲しいもの：

  1. 理想的には、これらの問題がまったく発生しないことを確認するソリューションが必要です。上/下または両側の大きな要素をトリミングしてもかまいません。
  2. （1）が不可能な場合は、少なくとも、これが発生する各行を強調表示して明確に確認する方法が必要です. 言い換えれば、行が 1 ピクセルだけ高くなれば、テキストをざっと目を通しただけでも注意を引く必要があります。
0 投票する
3 に答える
613 参照

css - 最小の高さの div に基づく CSS div の等しい高さ

身長を固定せずに解決したいこの問題があります。ボタンには Bootstrap 4 を使用しています。

私の HTML は次のように構成されています: 2 つの div ( LeftとRight ) を含む 1 つの div、Leftには短いテキストが含まれ、Rightには 5 つのボタン (またはそれ以上) がフレックス表示に含まれます。右はボタンを列に表示しますが（私が欲しいので）、コンテンツをラップしません。すべてのボタンを1つの列に収めるために左と右の両方の高さを増やします。

私が望むのは、グローバルの高さをLeftの高さに固定することです。Rightは、ボタンを 2 列に配置することでこの高さに適応する必要があります。私の唯一の解決策は、divの高さを手動で修正することですが、これは機能していますが、もっと良い方法があると確信しています。

ここに簡略化されたコード HTML と CSS があります。また、コードペンもあります (最後に必要なものを確認したい場合は、身長をコメントしました): https://codepen.io/julianlecalvez/pen/dwEoax


12345678910