1

2列のレイアウトに似たものがあります。
その幅は1000pxです。

オブジェクトには2種類あります。
画像オブジェクトとテキスト1。私は彼らにこのように見えて振る舞って欲しいです（例の画像）：http： //i.imgur.com/C7y2U.jpg

しかし、私のサイトではめちゃくちゃになっているので、コードを自由に見てください:(その洗練された言語を気にしないでください。画像オブジェクトも灰色の長方形です） http://uchman.org/pl/banan

あなたが私のサイトで探しているもの：

<ul class="miniatura">
 <li class="imag">      <-- image object
 </li>
 <li class="desc">      <-- text object
 </li>
</ul>

問題

  • テキストオブジェクトが画像オブジェクトよりも高い（> 200px）場合、画像オブジェクトは本来よりも低く表示され、ページの見栄えが悪くなります

期待

  • テキストオブジェクトの動的な高さは0〜400ピクセルの範囲である必要があります（マージンはカウントしません）
  • 画像オブジェクトは私の例の画像のようにグリッドを定義する必要があり、テキストオブジェクトは対象となる必要があります。たとえば、画像間のスペースが大きすぎる場合、1つの画像オブジェクトが所定の位置に「ジャンプ」する必要があります（私のサイトでは、2番目の画像オブジェクトが低すぎて醜いギャップがあります）
  • テキストオブジェクトの後のギャップは問題ありません（たとえば、テキストオブジェクトが360pxの場合の画像の例のように、ギャップは40pxである必要があります）

私はいくつかのことを試しましたが、インターネット上で何も見つかりません。私は何か間違ったことをしたかもしれないので、私が試したことを提案しません。最善の解決策は純粋なhtml/cssです。問題をうまく説明できたと思います。助けてください。:)

4

1 に答える 1

1

私があなたの説明から理解したことによると、私はこれをしました。

初めて私はこの種のマークアップがあなたをより良くするのに役立つと思います

<div id="container">
    <div class="column">
        <div class="textBox">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem mollitia fugit voluptate expedita molestias optio deleniti ea nulla perspiciatis quae molestiae accusamus quisquam ab illum ipsam eos qui nam ad.</p>
        </div>
        <img src="http://lorempixel.com/output/food-q-c-490-200-7.jpg" alt="">
    </div>
    <div class="column">
        <img src="http://lorempixel.com/output/food-q-c-490-200-7.jpg" alt="">
        <img src="http://lorempixel.com/output/food-q-c-490-200-7.jpg" alt="">
        <div class="textBox">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem mollitia fugit voluptate expedita molestias optio deleniti ea nulla perspiciatis quae molestiae accusamus quisquam ab illum ipsam eos qui nam ad.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem mollitia fugit voluptate expedita molestias optio deleniti ea nulla perspiciatis quae molestiae accusamus quisquam ab illum ipsam eos qui nam ad.</p>
        </div>
    </div>
</div><!--/#container-->​

また、石積みを確認することをお勧めします。状況によっては役立つ場合があります。

于 2012-12-30T19:01:28.027 に答える