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: relativeposition: 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: right的div5 ， div6被定位在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: right的div5 ，我们迫使它采取下行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;
