500px (幅) の画像と 500px (幅) のテーブルがあります (テーブルはブートストラップからのものです)。
画像と表を一行で表示したいのですが、表が画像の下に入ります。
質問する
3238 次
2 に答える
2
IMGとTABLEインラインを示す簡単な例を次に示します。display: inline-block;要素を互いに同じ行に配置するために使用されますが、インライン ブロックを使用することの 2 つの副作用に注意する必要があります。
まず、インライン ブロック要素間の空白 (スペース、タブ、改行文字) が出力に表示されます。インラインブロック要素を単語と考えてください。単語の間にスペースを入れると、スペースがレンダリングされます。これを相殺するには、2 番目の要素に負のマージンを使用するか、HTML の 2 つの要素の間の空白を単純に削除します。
第 2 に、インライン ブロック要素は垂直方向の配置プロパティ セットを持つことができます。これは、2 つの要素を垂直方向に互いの中央に揃えたい場合に最適です。ただし、要素を同じ高さにしたい場合はvertical-align: top;、CSS で明示的に設定する必要があります。
Bootstrap を使用しているため、 の幅TABLEも 100% に設定されます。の明示的な幅を設定するTABLEか、要素をデフォルトの「必要なだけ拡大」に戻すことができます。width: auto;
表も、その中のコンテンツに合わせて大きくなります。Bootstrapmax-width: 100%;は CSS で設定することでこれを解決します。max-width も定義するかtable-layout: fixed;、幅を設定するときにテーブルで使用してください。
于 2013-06-22T19:03:33.780 に答える