How can I make a container layout like this?

StackOverflow https://stackoverflow.com/questions/22627369

  •  20-06-2023
  •  | 
  •  

题

I tried to make a container that repeat the panel of posts again and again such blogs but I can't make the spaces disappear.

So the picture will show what I need.

Pic 1:
enter image description here

Pic 2: http://i.stack.imgur.com/vNpGp.png

As images show, I need to remove spaces from pic 1 and can't do it.

Please give me an HTML with CSS file to make like the second image.

有帮助吗？

解决方案

You can use some jQuery plugins for this.
For example mansonry or isotope.
I think an css only solution will not work.

Maybe with display: table, display:table-cell this also works with css.

其他提示

<style type="text/css">
ul {float: left; width: 430px; padding: 0 14px 0 0; list-style: none}
ul li{color: #fff; background:#333; min-height: 155px; margin: 0 0 7px 0}

.first{height: 318px}
.last{height: 590px}
</style>

<body>

<ul>
    <li class="first">Your content here</li>
    <li>Your content here</li>
    <li>Your content here</li>
</ul>
<ul>
    <li>Your content here</li>
    <li>Your content here</li>
    <li>Your content here</li>
    <li>Your content here</li>
</ul>
<ul>
    <li class="last">Your content here</li>
</ul>

</body>

http://jsfiddle.net/tS3Wr/

This will help you

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top