2012-12-31 69 views
1

看它这个图片...我怎样才能让这个div向左而不是右?

http://www.flickr.com/photos/[email protected]/8329388242/in/photostream

我怎样才能使这个div向左走,而不是正确的?

它不断搞乱,我真的需要它来解决任何想法,我可以使它工作?

<style type="text/css"> 

#body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

#html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    background: #E0E0E0; 
} 

#header { 
    background: #FFFFFF; 
    height: 33px; 
    width: 100%; 
    padding: 5px 30px 5px 30px; 
    font-family: arial; 
    font-size: 30px; 
    border-bottom: 1px #737373 solid; 
    position: fixed; 
    top: 0; 
} 

#container { 
    width: 1205px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 50px; 
} 

#box { 
    width: 228px; 
    height: auto; 
    background: #FFFFFF; 
    border: 1px #5E5E5E solid; 
    margin: 5px; 
    float: left; 
    font-family: arial; 
} 

#box_title { 
    width: 218px; 
    height: auto; 
    padding: 5px; 
    background: #5E5E5E; 
    color: white; 
    border-bottom: 1px #FFFFFF solid; 
    float: left; 
    font-family: arial; 
} 

#box_img { 
    width: 210px; 
    height: auto; 
    float: left; 
    margin-left: auto; 
    margin-right: auto; 
} 

#box_options { 
    width: 228px; 
    height: 40px; 
    background: #FFFFFF; 
    color: #000000; 
    border-top: 1px #5E5E5E solid; 
    float: left; 
    font-family: arial; 
+5

你应该做一个[的jsfiddle(http://jsfiddle.net/),并链接到它,而不是一个屏幕截图 - 你可能会获得更多帮助。 –

+2

这让我想起了http://www.wookmark.com/jquery-plugin –

+0

这不是一个答案,但是这篇文章解释了为什么花车会这样做:http://designshack.net/articles/css/everything-you-never -knew-about-css-floats /(跳到疯狂的浮动规则)。 – lpd

回答

1

不是用你打开的标签判断你,但你似乎想要一个“Pinterestish”墙。这是不容易的通过香草CSS,我可以建议寻找jquery砖石?

http://masonry.desandro.com/

它为您完成所有的繁重

+0

是啊,我知道我是看着它,看看他们怎么过的 –

+0

感谢现场 –

+0

都Pinterest的和Microsoft HTML地铁应用程序使用编程方式确定的绝对定位布局各自的网格,所以如果这是足以让他们好那么它可能好对你来说足够了。这里肯定是一个用于导入任何有能力的库的+1;除非这是一次学习体验,否则我认为你自己浪费时间做这件事不值得。 – lpd

相关问题