CSS浮动Div的variables高度

我有无限数量的宽度为100px的div,可以放入宽度为250px的父级。 无论身高如何,我需要将div显示在行中,如图所示。 我已经尝试解决这个问题,但高度似乎是搞砸了。

在这里输入图像描述

我真的很感激你的帮助。 谢谢 :)

<style> #holder{ width:250px; border:1px dotted blue; display:inline-block; } .box{ width:100px; height:150px; background-color:#CCC; float:left; text-align:center; font-size:45px; display:inline-block; } .one{ background-color:#0F0; height:200px; } .two{ background-color:#0FF; } .three{ background-color:#00F; } .four{ background-color:#FF0; } </style> <div id="holder"> <div class="box one">1</div> <div class="box two">2</div> <div class="box three">3</div> <div class="box four">4</div> </div> 

这是jsfiddle

这是我做了什么,使用javascript https://jsfiddle.net/8o0nwft9/

据我所知,没有办法用纯CSS来解决这个问题(可以在所有常见的浏览器中使用):

  • 浮动不起作用 。
  • display: inline-block 不起作用 。
  • position: relative position: absolute需要手动像素调整 。 如果您使用的是服务器端语言,并且正在处理图像(或具有可预测高度的图像),则可以使用服务器端代码“自动”处理像素调整。

相反,使用jQuery砌体

假设你的需求更像你的彩色示例代码那么:

 .box:nth-child(odd){ clear:both; } 

如果它将是3行,那么nth-child(3n+1)

我提供了这个答案,因为即使有好的解决scheme( 使用砌体 )仍然不是很清楚,为什么不可能通过使用浮动来实现这一点。

(这很重要 – #1 )。

浮动元素将尽可能向左或向右移动,因为它可能位于最初的位置

所以这样说吧:

我们有2个div

 <div class="div5">div5</div> <div class="div6">div6</div> .div-blue{ width:100px; height:100px; background: blue; } .div-red{ width:50px; height:50px; background: red; } 

没有float他们会一个在另一个之下

在这里输入图像描述

如果我们float: rightdiv5div6被定位在div5所在的div5

/*the lines are just for illustrate*/

在这里输入图像描述

所以,如果现在我们float: left div6它会尽可能向左移动,“ 在这一行 ”(见上面的#1),所以如果div5改变它的行, div6会跟着它。

现在让我们在等式中添加其他的div

 <div class="div4">div4</div> <div class="div5">div5</div> <div class="div6">div6</div> .div-gree{ width:150px; height:150px; background: green; float:right; } 

我们有这个

在这里输入图像描述

如果我们clear: rightdiv5 ,我们迫使它采取下行div4线

在这里输入图像描述

div6会浮在这条新的线上,在右边或左边。

现在让我们来看看由于从左到右复制强制div堆栈而带来的问题

这里是testing它的片段:

 div{ width:24%; margin-right: 1%; float: left; margin-top:5px; color: #fff; font-size: 24px; text-align: center; } .one{ background-color:red; height: 50px; } .two{ background-color:green; height:40px; } .three{ background-color:orange; height:55px; } .four{ background-color:magenta; height:25px; } .five{ background-color:black; height:55px; } 
 <div class="one">1</div> <div class="two">2</div> <div class="three">3</div> <div class="four">4</div> <div class="five">5</div> <div class="one">1*</div> <div class="three">2*</div> <div class="four">3*</div> <div class="two">4*</div> <div class="five">5*</div> 

正如我们已经正确指出的那样,单靠CSS是不可能的……谢天谢地,我现在在http://isotope.metafizzy.co/上find了一个解决scheme。;

它似乎完全解决了这个问题。

从这个评论( CSS块左浮动 )的一点点帮助,我想出了答案。

在我制作的每一个“行”上,我都添加了一个类名。
在我制作的其他“行”上,我添加了一个类名。

然后,我向左漂浮,然后向右漂移,以获得这些类名称!

唯一的问题是我的内容顺序在“正确”的行上被颠倒过来,但是可以使用PHP解决。

感谢您的帮助人员!

 #holder{ width:200px; border:1px dotted blue; display:inline-block; } .box{ width:100px; height:150px; background-color:#CCC; float:left; text-align:center; font-size:45px; } .one{ background-color:#0F0; height:200px; } .two{ background-color:#0FF; } .three{ background-color:#00F; float:right; } .four{ background-color:#FF0; float:right; } .left{float:left;} .right{float:right;} 
 <div id="holder"> <div class="box one left">1</div> <div class="box two left">2</div> <div class="box four right">4</div> <div class="box three right">3</div> </div> </body> 

感谢十三,我意识到我以前的答案没有妥善解决问题。 这是我的第二次尝试,它利用JQuery作为CSS唯一的解决scheme似乎不可能:

 <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { var numberOfColumns = 3; var numberOfColumnsPlusOne = numberOfColumns+1; var marginBottom = 10; //Top and bottom margins added var kids = $('#holder:first-child').children(); var add; $.each(kids, function(key, value) { add = numberOfColumnsPlusOne+key; if (add <= kids.length){ $('#holder:first-child :nth-child('+(numberOfColumnsPlusOne+key)+')').offset({ top: $('#holder:first-child :nth-child('+(key+1)+')').offset().top+$('#holder:first-child :nth-child('+(key+1)+')').height()+marginBottom }); } }); }); </script> <style> #holder{ width:270px; border:1px dotted blue; display:inline-block; /* Enables the holder to hold floated elements (look at dotted blue line with and without */ } .box{ width:80px; height:150px; background-color:#CCC; margin:5px; text-align:center; font-size:45px; } .one{ height:86px; } .two{ height:130px; } .three{ height:60px; } .four{ clear:both; height:107px; } .five{ height:89px; } .six{ height:89px; } .left{float:left;} .right{float:right;} </style> </head> <body> <div id="holder"> <div class="box one left">1</div> <div class="box two left">2</div> <div class="box three left">3</div> <div class="box four left">4</div> <div class="box five left">5</div> <div class="box six left">6</div> </div> </body> </body> 

我的解决scheme仍然存在的唯一问题是,当一个盒子是两个盒子而不是一个盒子时会发生什么。 我仍在研究这个解决scheme。 完成后我会发布。

如果有人还在寻找替代品,这是一个。 尝试使用(-moz – / – webkit-)列宽属性。 它需要关心可变的div高度问题。 但列宽在列的末尾添加新的div。

否则,jQuery Masonry效果最好。

这可能并不是每个人的确切解决scheme,但是我发现(从字面上看)在盒子外面思考很多情况下工作:代替从左到右显示框,在许多情况下,您可以先填充左栏,去中间,用框填充,最后用框填充右栏。 你的形象将是:

填充顺序

如果您使用的是像php这样的脚本语言,您也可以通过添加一个新框来填充列,从而从左到右填充所有列。 例如(未经testing的PHP代码):

 $col1 = '<div class="col1"> <div>box1</div>'; $col2 = '<div class="col2"> <div>box2</div>'; $col3 = '<div class="col3"> <div>box3</div>'; $col1 .= '<div>box4</div> </div>'; //last </div> closes the col1 div $col2 .= '<div>box5</div> </div>'; $col3 .= '<div>box6</div> </div>'; echo $col1.$col2.$col3; 

$ col1,$ col2和$ col3可以浮动:left和width:33%,将div内的框设置为全宽而不是浮动。

很明显,如果你正在使用javascript / jquerydynamic加载框,那么也可以用这种方式来更好地设置它们,正如本主题的其他答案中所解释的那样。

显示只是把这个CSS到你的div,然后你有所需的布局。 不需要任何插件或JS。

  .Your_Outer { background-color: #FFF; border: 1px solid #aaaaaa; float: none; display:inline-block; vertical-align:top; margin-left: 5px; margin-bottom: 5px; min-width: 152.5px; max-width: 152.5px; } 

你可以按照你的要求编辑代码:)

在现代浏览器上,您只需执行以下操作:

 display: inline-block; vertical-align: top;