兩個css列。一個動態的，第二個固定在一起工作

Question

我有類似於兩列的佈局。
它的寬度是1000px。

有兩種對象。
圖像對象和文本之一。 我希望他們看看，這樣的表現（例如圖像）： 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> 

問題

• 當文本對象比圖像對象（> 200像素），則圖像對象出現比它應該下更高，並且網頁的外觀不良

期望

• 文本對象必須具有的範圍的動態高度0-400像素（我不計算保證金
• 圖像對象應該定義網格就像我的示例圖像和文本對象應該主題。 例如，如果圖像之間有太多空間，一個圖像對象應該「跳」到位（在我的網站上，第二個圖像對象太低並且存在難看的間隙）
• 文本對象之後的間隙很好（如上例圖像爲例如，如果文本對象是360px的差距應該是40px）

我試過一些東西，我找不到任何東西在互聯網上。我不會建議我嘗試過，因爲我可能做錯了什麼。最好的解決方案是純html/css。我希望我很好地描述了這個問題。請幫忙。 :)

Answer 1

根據我的理解你的描述我做了this。

我第一次猜這種加價將幫助您更好地

<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-->​ 

我還建議你看看在masonry，它可以在某些情況下非常有用。