Geek Answers Handbook

CSS saves elements as much as possible top and left

I am trying to create a website with PHP.

<span style="height:60px;"></span> <span style="height:90px;"></span> <span style="height:95px;"></span> <span style="height:45px;"></span> <span style="height:60px;"></span> <span style="height:70px;"></span> <span style="height:55px;"></span> <span style="height:60px;"></span> <span style="height:40px;"></span>

The spills above are some posts.
And its CSS:

 span{ width:150px; margin:1px; display:inline-block; float:left; background-color:#000; }

I got this result: http://jsfiddle.net/5kPFJ/3

But I need this result: http://jsfiddle.net/56ybX/
I used a <div> with some CSS to preserve maximum vertices.
But I need this result without the <div> .
What should I do?

+6
source share
3 answers

you should have some kind of shell for storing the column, when you float some thing that it displays, becoming a block, so the gaps are now blocked, you cannot do what you want. you have to make 3 columns float and inside them put your spaces and the container can be any html element you can change the behavior of this element using CSS

+1
source

Are you looking for something like this? http://jsfiddle.net/oneeezy/5kPFJ/10/

Please note that an external external reset.css file is included in external resources, as this is a big part of why this works.

HTML

 <section class="flex-row"> <article class="flex-col item1"> <p class="item1">item1</p> <p class="item2">item2</p> <p class="item1">item1</p> </article> <article class="flex-col item1"> <p class="item1">item1</p> <p class="item1">item1</p> <p class="item3">item3</p> </article> <article class="flex-col item1"> <p class="item4">item4</p> <p class="item2">item2</p> <p class="item2">item2</p> </article> <article class="flex-col item1"> <p class="item1">item1</p> <p class="item1">item1</p> <p class="item1">item1</p> </article> </section>

CSS

 section { width: 100%; height: 100%; padding: 1em; } article { background: black; } p { border: 1px solid white; padding: 1em; color: white; } /* Flex Box */ .flex-col { display: flex; flex-flow: column; } .flex-row { display: flex; flex-flow: row; } .flex { display: flex; } .item1 { flex: 1; } .item2 { flex: 2; } .item3 { flex: 3; } .item4 { flex: 4; }
0
source

Try it. You will play with absolute position and some simple math.

 span{ position:absolute; width:150px; margin:1px; } span:nth-child(1){ top:0; left:0; background-color: red; } span:nth-child(2){ top:65px; left:0px; background-color: red; } span:nth-child(3){ top:160px; left:0px; background-color: red; } span:nth-child(4){ top:0px; left:155px; background-color: yellow; } span:nth-child(5){ top:50px; left:155px; background-color: yellow; } span:nth-child(6){ top:115px; left:155px; background-color: yellow; } span:nth-child(7){ top:0px; left:310px; background-color: blue } span:nth-child(8){ top:60px; left:310px; background-color: blue } span:nth-child(9){ top:125px; left:310px; background-color: blue }

Working demo: http://jsfiddle.net/5kPFJ/3/

0
source

More articles:


All Articles