具有等间距DIV的stream体宽度
我有一个stream体宽度容器DIV。
在这个我有4个DIVs全部300px x 250px …
<div id="container"> <div class="box1"> </div> <div class="box2"> </div> <div class="box3"> </div> <div class="box4"> </div> </div> 我想要发生的是盒子1左边飘动，盒子4右边飘动，盒子2和3间隔均匀。 我想要的间距也是stream动的，所以浏览器变得更小，空间也变小。
请参阅： http : //jsfiddle.net/thirtydot/EDp8R/
- 这适用于IE6 +和所有现代浏览器！
- 我已将您要求的维度减半，以方便处理。
-
text-align: justify结合.stretch是什么处理定位。 -
display:inline-block; *display:inline; zoom:1display:inline-block; *display:inline; zoom:1修复IE6 / 7的inline-block， 见这里 。 -
font-size: 0; line-height: 0font-size: 0; line-height: 0修复了IE6中的一个小问题。
#container { border: 2px dashed #444; height: 125px; text-align: justify; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines; /* just for demo */ min-width: 612px; } .box1, .box2, .box3, .box4 { width: 150px; height: 125px; vertical-align: top; display: inline-block; *display: inline; zoom: 1 } .stretch { width: 100%; display: inline-block; font-size: 0; line-height: 0 } .box1, .box3 { background: #ccc } .box2, .box4 { background: #0ff }
<div id="container"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <span class="stretch"></span> </div>
现在最简单的方法就是使用flexbox：
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
那么CSS就是简单的：
#container { display: flex; justify-content: space-between; }
演示： http : //jsfiddle.net/QPrk3/
但是 ，目前只有相对较新的浏览器支持（ http://caniuse.com/flexbox ）。 此外，flexbox布局的规格已经改变了几次，因此可以通过额外包含更老的语法来覆盖更多的浏览器：
如果css3是一个选项，可以使用css calc()函数来完成。
案例1：在一行上对盒（ FIDDLE ）
标记很简单 – 一些容器元素的div。
CSS看起来像这样：
div { height: 100px; float: left; background:pink; width: 50px; margin-right: calc((100% - 300px) / 5 - 1px); } div:last-child { margin-right:0; }
其中-1px来修复IE9 +计算/舍入错误 – 请参阅此处
案例2：多行alignment框（ FIDDLE ）
在这里，除了calc()函数外， media queries也是必要的。
基本的想法是为每个#columns状态设置一个媒体查询，然后使用calc（）来计算每个元素（除了最后一列中的元素）的margin-right。
这听起来像很多工作，但如果你使用LESS或SASS，这可以很容易地完成
（它仍然可以用普通的css来完成，但是你必须手动完成所有的计算，然后如果你改变了盒子的宽度 – 你必须重新计算一切）
下面是一个使用LESS的例子：（你可以在这里复制/粘贴这个代码来使用它，[这也是我用来产生上面提到的小提琴的代码]）
@min-margin: 15px; @div-width: 150px; @3divs: (@div-width * 3); @4divs: (@div-width * 4); @5divs: (@div-width * 5); @6divs: (@div-width * 6); @7divs: (@div-width * 7); @3divs-width: (@3divs + @min-margin * 2); @4divs-width: (@4divs + @min-margin * 3); @5divs-width: (@5divs + @min-margin * 4); @6divs-width: (@6divs + @min-margin * 5); @7divs-width: (@7divs + @min-margin * 6); *{margin:0;padding:0;} .container { overflow: auto; display: block; min-width: @3divs-width; } .container > div { margin-bottom: 20px; width: @div-width; height: 100px; background: blue; float:left; color: #fff; text-align: center; } @media (max-width: @3divs-width) { .container > div { margin-right: @min-margin; } .container > div:nth-child(3n) { margin-right: 0; } } @media (min-width: @3divs-width) and (max-width: @4divs-width) { .container > div { margin-right: ~"calc((100% - @{3divs})/2 - 1px)"; } .container > div:nth-child(3n) { margin-right: 0; } } @media (min-width: @4divs-width) and (max-width: @5divs-width) { .container > div { margin-right: ~"calc((100% - @{4divs})/3 - 1px)"; } .container > div:nth-child(4n) { margin-right: 0; } } @media (min-width: @5divs-width) and (max-width: @6divs-width) { .container > div { margin-right: ~"calc((100% - @{5divs})/4 - 1px)"; } .container > div:nth-child(5n) { margin-right: 0; } } @media (min-width: @6divs-width){ .container > div { margin-right: ~"calc((100% - @{6divs})/5 - 1px)"; } .container > div:nth-child(6n) { margin-right: 0; } }
所以基本上你首先需要决定一个盒子宽度和最小的边距，
有了这个，你可以计算出每个州需要多less空间。
然后，使用calc（）来计算右边界，而第n个孩子从最后一列的框中移除右边界。
这个答案胜过使用text-align:justify的接受答案的优点是，当你有不止一行框 – 最后一行的框不会得到“alignment”，例如：如果有2个框保留在最后一排 – 我不希望第一个盒子在左边，而下一个在右边 – 而是盒子依次相继。
关于浏览器支持 ：这将工作在IE9 +，Firefox，Chrome，Safari6.0 + – （详情请参阅这里 ） 但是我注意到在IE9 +媒体查询状态之间有一点小故障。 [如果有人知道如何解决这个我真的很想知道:)] < – 固定在这里
其他职位已经提到了flexbox ，但如果需要多行项目 ，flexbox的属性space-between的space-between 失败 （请参阅post末尾）
到目前为止，唯一干净的解决scheme是与
CSS网格布局模块 （ Codepen演示 ）
基本上相关的代码需要归结为：
ul { display: grid; /* (1) */ grid-template-columns: repeat(auto-fill, 120px); /* (2) */ grid-gap: 1rem; /* (3) */ justify-content: space-between; /* (4) */ align-content: flex-start; /* (5) */ }
1）使容器元素成为网格容器
2）根据需要用“自动”数量的列设置网格。 这是为响应式布局完成的。 每列的宽度将是120px。
3）为网格行和列设置间隙/排水沟 – 在这里，因为想要一个“空间”布局 – 差距实际上是一个最小的差距，因为它会根据需要增长。
4）和5） – 类似于flexbox。
body { margin: 0; } ul { display: grid; grid-template-columns: repeat(auto-fill, 120px); grid-gap: 1rem; justify-content: space-between; align-content: flex-start; /* boring properties: */ list-style: none; width: 90vw; height: 90vh; margin: 2vh auto; border: 5px solid green; padding: 0; overflow: auto; } li { background: tomato; height: 120px; }
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
在jQuery您可能会直接定位父项。
这是有用的，如果你不知道如何dynamic增加许多儿童或如果你不能指出他们的数字。
var tWidth=0; $('.children').each(function(i,e){ tWidth += $(e).width(); ///Example: If the Children have a padding-left of 10px;.. //You could do instead: tWidth += ($(e).width()+10); }) $('#parent').css('width',tWidth);
这样可以让parent在children被添加的同时水平增长。
注意：这假定'.children'具有width和Height集
希望有所帮助。
如果您知道每个“行”元素的数量和容器的宽度，则可以使用select器为元素添加边距，以便使alignment的外观变得更加合理。
我有三行我想要certificate理由使用：
.tile:nth-child(3n+2) { margin: 0 10px }
这允许每行的中央div有一个边缘，强制第一个和第三个div到容器的外边缘
也非常适合其他的东西，如边框背景颜色等
这对我有5个不同大小的图像。
- 创build一个容器div
- 图像的无序列表
- 在CSS上，未经调整的部分必须垂直显示，没有子弹
- certificate集装箱的内容
这是因为justify-content：space-between，它在列表中，水平显示。
在CSS上
#container { display: flex; justify-content: space-between; } #container ul li{ display:inline; list-style-type:none; }
在html上
<div id="container"> <ul> <li><img src="box1.png"><li> <li><img src="box2.png"><li> <li><img src="box3.png"><li> <li><img src="box4.png"><li> <li><img src="box5.png"><li> </ul> </div>
使用margin 0自动将容器div居中，然后从那里向box2添加一个边距，并为所需的空间添加一个到边框3的边距
#container { width:1200px; margin:0 auto; } #container div { width:300px; height:250px; float:left; } .box2 { margin-left:10px; } .box3 { margin-right:10px; }
这样，容器内的所有div都是并排的，并且可以使用margin来控制div之间的间距
