2

私はCSSに少し慣れていないので、解決できないように見える問題があります。ページに一連の div を配置し (上下に積み重ね)、それぞれにテキストと 1 つ以上の画像を含める必要があります。

特に、テキストを左揃えにし、垂直方向に中央揃えにし、画像を右揃えにし、div の高さを画像の高さに基づいてください (可変である可能性があります)。

基本的に、各 div は次のようになります。 ここに画像の説明を入力

これまでのところ、上記の要件の 1 つまたは複数を取得できましたが、すべてを同時に取得することはできませんでした。これは純粋なCSSで実際に可能ですか、それとも時間を無駄にするのをやめてテーブルを使用する必要がありますか?

4

2 に答える 2

0

ああ、うまくいくかもしれない楽しい解決策を手に入れましたが、それでもなお堅実なアイデアです!

画像を背景として設定すると、フローティングや配置を回避できます。

.section {
   background: url(http://jpowell43.mydevryportfolio.com/flatDesign/images/tab-2.svg) no-repeat rgba(255, 255, 0, 0.4);
   background-position: center right;
   background-size: contain;
   width: 100%;
}

問題があると思われる唯一のことは、画像サイズが div 内のコンテンツに基づいていることです。

JSFIDDLE

これにより、画像のサイズを固定できますが、! 画像よりもテキストのサイズに依存するという問題に遭遇します。:/

background-size: 80px 60px;

固定サイズ

を使用してmin-height: whatever;も、目的の結果を得ることができますが、100% 最善というわけではありません。

最小高さ

于 2013-10-18T21:25:59.730 に答える