css - CSSで、インラインブロックの高さを並べることはできますか？

Question

CSSで、インラインブロックの高さを並べることはできますか？

余白を0に、高さを自動に設定することで、ブロックは使用可能なスペースに合わせて拡張されると思いましたが、それでもブロックをしっかりと包み込みます。

.myclass {
    display: inline-block;
    margin: 0em;
    padding: 1em;
    height: auto;
    border: solid;
}

両方のボックスの高さを同じにしたいのですが、divの幅/高さは、ピクセル単位で幅/高さを指定するのではなく、コンテンツによって決定されるようにします。

ある種のパディング/マージン/アライメントCSSまたは私が使用できるようなものはありますか？

score 32 · Accepted Answer

純粋な CSS ソリューションが必要な場合に使用できdisplay:table-cell;ますが、IE7 では機能しないことに注意してください (IE6 は今では完全に忘れられていると思います)。

.myclass {
    display: table-cell;
    margin: 0em;
    padding: 1em;
    height: auto;
    border: solid;
}

必要なものを達成するための最善の策は JavaScript ですが、動的コンテンツを含むコンテナーの幅を明示的に設定することは、ほとんどの場合、問題を解決する正しい方法ではありません。

score 3 · Accepted Answer

を使用display: table-cell;して、ボックスを互いの高さに一致させることができます。

score 0 · Accepted Answer

IE7 のサポートが必要な場合は、inline-block または table-cell を使用できません。

安全のために float:left を使用してください...

そうしないと、IE7 専用の別の CSS を使用することになります。

score -2 · Accepted Answer

lte ie8 用のスタイルシートを追加し、プロパティを display:block、float:left にリセットし、合計幅を 100% ではなく 99% にするのは簡単です。これにより、必要な機能がすべて提供されます。

5 に答える 5