0

css を使用して垂直方向に配置する方法について、さまざまな提案を見つけました。しかし、どれも私が望んでいたものを処理できませんでした。ここに私が欲しいものがあります:

一般に、スペースの左半分を埋めるテキストと、スペースの右半分を占める画像があります。

テキストの高さが画像よりも小さい場合、テキストと画像の両方がスペースの上部に垂直に配置される必要があります。

TextTextText   PicturePicture
TextTextText   PicturePicture
               PicturePicture

テキストの高さが画像の高さよりも大きい場合は、テキストを垂直方向に上に配置し、画像をテキストに対して中央に配置する必要があります。

TextTextText
TextTextText   PicturePicture
TextTextText   PicturePicture
TextTextText   PicturePicture
TextTextText

これが私が試した簡単な方法の1つです（画像なしのテキストバージョン）：

<div style="width: 100%">
  <div style="width: 50%; display: inline-block; vertical-align: top;">
    TextTextText <br>
    TextTextText <br>
    TextTextText
  </div><div style="width: 50%; display: inline-block; vertical-align: middle;">
    PicturePicture <br>
    PicturePicture
  </div>
</div>

しかし、意図した効果は得られませんでした。右内側の div (画像) は、テキストに対して中央ではなく、上に配置されています。vertical-align: middle設定と に違いはありませんvertical-align: top。ただし、興味深いことに、設定vertical-align: bottomによって違いが生じます。

外側の div は、特定の幅の他の要素に含まれています。ただし、この幅を固定単位 (px など) で指定することはできません。同じ幅の 2 つの内側の div についても同じです。

内側の div テーブル セルを作成すると、適切な垂直効果が得られます。ただし、display: table-cell右の内側の div にはPicturePicturePicturePicturePicture.... これは、左のセルの幅を縮小することにつながりますが、これは望ましくありません。

さらに、コンテンツの高さがわからないため、固定高さを使用する垂直方向の配置のトリックはどれも機能しません。

それほど珍しい作業ではないように思えましたが、解決策を見つけることができませんでした。これを行うことは可能ですか？

4

3 に答える 3

0

CSSはそれを実現するために作成されていないため、垂直方向の配置には常に注意が必要です。
それでも、これはあなたが求めていたものですか？http://jsfiddle.net/N7px2/

もしそうなら、読み続けてください。
まず、これは悪い習慣なので、インラインスタイルを削除しました。HTMLの先頭で使用<style>...</style>するか、さらに良い方法として使用します。外部CSSファイルを使用します。

#b次に、私はあなたのdivをフロート#cさせ、あなたの例のようにそれらを整列させました。background-colorおよびを参照してborder、各要素が配置されている場所をすばやく確認してください。
floatを使用すると親要素が折りたたまれるので、clearfixを使用して修正しました。詳しくはこちらをご覧ください。

次に、垂直方向の配置：画像を#c絶対位置に配置し、マージンを設定しましたtop: 50%。明らかにそれはイメージを押しすぎました、しかしそれはそれがどのように機能するかです。その後、ネガを適用しmargin-top: -25%て画像を元の位置に戻しました。これは、親要素が相対位置にある場合にのみ機能することに注意してください。負のマージンに対するブラウザのサポートは非​​常に優れており、悪いレイアウトを修正するために使用されない限り、それらを使用しても問題ありません。

そして別の注意：position: absoluteフローから要素を取り出すため、#c崩壊します。#cまたは同様のものを提供したい場合はbackground-image、それを修正するためにもう少しマークアップが必要です-単に別のdivを追加します。

それが何らかの形であなたを助けたことを願っています！

編集：申し訳ありませんが、私はこのコードが私が信じた後のあなたのコードと正確に一致していないことに気づきました。

于 2013-01-16T00:10:40.673 に答える
0

左の内側の div の幅に影響を与えないことを除いて、右の内側の div に対して画像が広すぎる場合にどのような動作が必要かはわかりませんが、これは要件を満たしていますか?

HTML。

<div class="container">
  <div class="caption cell">
    Text Text Text <br/>
    Text Text Text <br/>
    Text Text Text <br/>
    Text Text Text <br/>
    Text Text Text <br/>
    Text Text Text
  </div>

  <div class="picture cell">
    <div>
      <img src="http://placehold.it/500x50" />
    </div>
  </div>
</div>

CSS

.container {display:table; table-layout: fixed; width:100%; }
.cell { display: table-cell; width:50%; }
.caption { vertical-align: top; }
.picture { vertical-align: middle; }
.picture div { overflow-x:hidden; }

JSFiddle のhttp://jsfiddle.net/92wcy/1/

于 2013-01-16T09:18:32.347 に答える
0

左の列を縮小したくない場合は、それに amin-widthを追加します。

http://jsfiddle.net/pUbWt/1/

.container {
  display: table;
  width: 100%;
}

.container .caption, .container .picture {
  display: table-cell;
}

.container .caption {
  vertical-align: top;
  min-width: 10em;
}

.container .picture {
  vertical-align: middle;
}

Flexbox も機能しますが、運用サイトで使用を開始するには少し時期尚早です。

于 2013-01-16T00:07:50.803 に答える