css - 两个 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>

问题

• 当文本对象高于图像对象 (>200px) 时，图像对象显示得比应有的低，页面看起来很糟糕

期望

• 文本对象的动态高度必须在 0-400 像素范围内(我不计算边距
• 图像对象应该像我的示例图像一样定义网格，文本对象应该主题。 例如，如果图像之间的空间太大，一个图像对象应该“跳”到位(在我的网站上，第二个图像对象太低并且存在难看的间隙)
• 文本对象后的间隙很好(如示例图像，例如，如果文本对象为 360 像素，间隙应为 40 像素)

我已经尝试了一些东西，但我无法在 Internet 上找到任何东西。我不会建议我尝试过的方法，因为我可能做错了什么。最好的解决方案是纯 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 , 它在某些情况下很有用。