具有等间距div的流体宽度

Question

具有等间距div的流体宽度我有一个流体宽度容器DIV。在这里面我有4个div所有300 px250px.。<div id="container">    <div class="box1"> </div>    <div class="box2"> </div>    <div class="box3"> </div>    <div class="box4"> </div></div>我想要发生的是框1向左浮动，方框4向右浮动，方框2和3之间间隔均匀。我希望空间也是流动的，所以浏览器越小，空间也就越小。

Answer 1

如果CSS 3是一个选项，这可以使用css完成。calc()功能。

案例1：在一行(小提琴 )

标记很简单-一堆带有容器元素的div。

CSS看起来如下：

div{
    height: 100px;
    float: left;
    background:pink;
    width: 50px;
    margin-right: calc((100% - 300px) / 5 - 1px); }div:last-child{
    margin-right:0;}

哪里-1 px若要修复IE9+calc/舍入错误，请参阅这里

案例2：在多行(小提琴 )

这里，除了calc()职能，media queries是必要的。

基本思想是为每个#列状态设置一个媒体查询，然后使用calc()计算每个元素的边距(除了最后一列中的元素)。

这听起来是很多工作，但如果你用得少或用得少，这是很容易做到的。

(这仍然可以用常规的CSS完成，但是之后你必须手动完成所有的计算，然后如果你改变了你的盒子宽度-你必须重新计算出所有的东西)

下面是一个使用更少的示例：(您可以复制/粘贴此代码这里为了玩它，(这也是我用来生成上面提到的小提琴的代码)

@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-mar
gin * 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;
    }}

所以基本上，你首先需要决定一个盒子的宽度和一个你想要的盒子之间的最小边距。

这样，您就可以计算出每个状态所需的空间。

然后，使用calc()计算右边距，使用nth-child从最后一列的框中删除右边距。

这个优势与已接受的答案相比，该答案使用text-align:justify当你有超过一行的盒子-最后一行的盒子没有“合理”的时候，例如：如果最后一行还有两个盒子，我不希望第一个盒子在左边，下一个盒子在右边-相反，盒子是按照顺序排列的。

关于浏览器支持：这将适用于IE9+、Firefox、Chrome、Safari6.0+-(参见这里欲知更多详情)