0

私は、画像が属するカテゴリに従って画像を並べて表示しているページを持っています。各画像配列は、それが属するカテゴリで始まります。画像は幅と高さが異なりますが、絶対高さが 330px の div に配置されます。

CSS:

.front-index {  
margin: 0 1em 0 2em; 
}

.front-work { 
    margin: 0 2em 2em 0; 
    display: table; 
    width: 66px; 
    position: relative;
    height: 330px;
    background-color:#f0f0f0;
}

.front-work img { 
    margin: .3em 0 .3em 0; 
}

.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.wraptocenter * {
    vertical-align: middle;
}

.front-index,
.front-work {
    float: left;
}

HTML:

<div class="front-index"><p>How to get<br /> this text on the same line with<br /> yellow image on the right?</p></div>


    <div class="front-work">
        <div class="wraptocenter">
            <img width="162" height="250" src="http://images.fanpop.com/images/image_uploads/Yellow-Wallpaper-yellow-646738_800_600.jpg"/>
        </div>  
    </div>  

    <div class="front-work">
        <div class="wraptocenter">
            <img width="250" height="166" src="http://www.takenseriouslyamusing.com/wp-content/uploads/2012/08/Blue.png"/>
        </div>  
    </div>
…

JSFIDDLE: http://jsfiddle.net/rCAKa/9/

右側の最初の画像と同じ行にテキストを揃えたいと思います。

私が念頭に置いていたのは、これはjqueryで行う必要があるかもしれないということです。すなわち。どうにかして .front-work div 内の上部から画像の距離を測定し、その値をインライン コードとして .front-index div に割り当てます (上部: 任意の px )。

おそらく、あなたの誰かがこの種の問題に直面し、この種の問題の解決策を知っていますか? CSS または JS。

4

2 に答える 2

1

私の謙虚な意見では、CSSを介してあなたがしていることが可能であるとは思いません-右側の最初の画像の相対的な位置（コンテナの上部から）を知る必要があるため、簡単なJavaScriptのトリックが必要ですテキストを配置するために-CSSが完全に設計されていないもの。

JSの戦略は次のとおりです。

  1. 配置するテキストで各要素をループします
  2. 最初の画像の垂直方向の上部オフセットを右にフェッチします（親を含む場合と比較して）

  3. 上部のパディングマッチングを画像の上部の位置に設定します。または、子要素の上部の位置、パディングまたはマージン、またはテキストを再配置する他の方法を設定できます。

    $(document).ready(function() {
    $(".front-index").each(function() {
        var fromTop = $(this).next().find("img").position().top;
        $(this).css({
            "padding-top":fromTop
        });
    });
});

私はあなたのフィドルをフォークしました、そしてあなたはここでそれが実際に動いているのを見ることができます-http://jsfiddle.net/teddyrised/LT54V/1/

p / s：関連する注意点.wraptocenter * { }として、要素に多くの子要素がある場合（さらに多くの子要素がある場合もある場合もある）、CSSはそれらすべてを反復処理します。代わりに、.wraptocenter > * { }または単に.wraptocenter img { }:)を使用してみてください

于 2013-02-23T12:40:53.283 に答える
0

私は最初にcssを使用して問題を解決しようとしました。しばらくして、私は次の論理を理解しました。

  1. ディスプレイをテーブルとして設定し、右側のセルと同じ高さのdivを作成します
  2. 垂直方向に中央に配置される最初のテーブルセルdivを作成します
  3. このdivで、画像と同じ高さの別のサブdivを作成します。

HTMLコードは次のようになります。

<div class="front-index">
    <div class="front-index-inner">
        <div style="height:250px;">
            <p>How to get<br /> this text on the same line with<br /> yellow image on the right?</p>
        </div>
    </div>
</div>

そして私のCSSの一部としてこれ：

.front-index {  
    margin: 0 1em 0 2em; 
    display: table;
    height: 330px;
    overflow: hidden;
}
.front-index-inner {
    display: table-cell;
    width: 100%;
    vertical-align: middle;
}

あなたはここで結果を見ることができます：http：//jsfiddle.net/rCAKa/10/

これにより、明確で、理解しやすく、役立つソリューションがもたらされることを願っています。

ご挨拶、

ジェフ

于 2013-02-23T13:09:05.450 に答える