1

我有类似于两列布局的东西。
它的宽度是 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-400px 范围内的动态高度（我不计算边距
  • 图像对象应该像我的示例图像一样定义网格，而文本对象应该是主题。例如，如果图像之间的空间太大，则一个图像对象应该“跳”到位（在我的网站上，第二个图像对象太低并且存在难看的间隙）
  • 文本对象后的间隙很好（例如在示例图像上，例如，如果文本对象是 360 像素，间隙应该是 40 像素）

我已经尝试了一些东西，但我在互联网上找不到任何东西。我不会建议我尝试过什么，因为我可能做错了什么。最好的解决方案是纯 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-->​

我还建议您查看masonry，它在某些情况下可能很有用。

于 2012-12-30T19:01:28.027 回答