How can I make a container layout like this?

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

  •  20-06-2023
  •  | 
  •  

Domanda

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.

È stato utile?

Soluzione

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.

Altri suggerimenti

<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

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top