CSS float属性来对齐div [英] CSS float property to align div's

问题描述

这是我目前的输出：

我有一些严重的麻烦，让事情浮动左边正确， / p>

这是我希望达到的：

这里是一个 jsfiddle ，任何帮助将非常感谢。 ：）

html：

  < div id =content> 
 
< div class =box1> 
 1 
< / div> 
< div class =box2> 
 2 
< / div> 
< div class =box1> 
 3 
< / div> 
< div class =box1> 
 4 
< / div> 
< div class =box1> 
 5 
< / div> 
 
< / div> 
  

css：

  html，body {
 margin：0px; 
 padding：0px; 
} 
 
 a {
 text-decoration：none; 
} 
 
 #content {
 margin：20px 0px 0px 20px; 
 width：180px; 
 background-color：green; 
 overflow：auto; 
 padding-left：10px; 
} 
 
 .box1 {
 margin：10px 10px 0px 0px; 
 background-color：red; 
 position：relative; 
 float：left; 
 height：50px; 
 width：50px; 
} 
 
 .box2 {
 margin：10px 10px 0px 0px; 
 background-color：blue; 
 position：relative; 
 float：left; 
 height：110px; 
 width：50px; 
} 
  

哦，只是一点点注意，我宁愿不使用

我认为这不能只与css在一起，因为它是最后的手段。

解决方案

时刻，也许在不久的将来，但有很多javascript解决方案，并进行一些研究，我发现石工，我认为是最受欢迎的。你应该尝试一下。

I'm having some serious trouble getting things to float left correctly, or rather getting elements to float "true" left.

This is my current output:

and this is what I am hoping to achieve:

here is a jsfiddle, any help would be greatly appreciated. :)

html:

            <div id="content">

                <div class="box1">
                    1
                </div>
                <div class="box2">
                    2
                </div>
                <div class="box1">
                    3
                </div>
                <div class="box1">
                    4
                </div>
                <div class="box1">
                    5
                </div>

            </div>

css:

html, body {
    margin: 0px;
    padding: 0px;
}

a {
    text-decoration: none;
}

#content {
    margin: 20px 0px 0px 20px;
    width:180px;
    background-color: green;
    overflow: auto;
    padding-left: 10px;
}

.box1 {
    margin: 10px 10px 0px 0px;
    background-color: red;
    position: relative;
    float: left;
    height: 50px;
    width: 50px;
}

.box2 {
    margin: 10px 10px 0px 0px;
    background-color: blue;
    position: relative;
    float: left;
    height: 110px;
    width: 50px;
}

Oh and just a little note, I'd prefer to accomplish this without using javascript but am happy to use it as a last resort.

解决方案

I think this can't be done with only css at the moment, maybe in some short future, but there is a lot of javascript solutions to this and making some research i found Masonry, wich i think is the most popular. You should try it.

这篇关于CSS float属性来对齐div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！