流体宽度等间距DIV

Question

我有一个流体宽度的容器DIV.

在这个我有4个DIV全部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在它们之间均匀间隔.我希望间距也是流畅的,因此随着浏览器变小,空间也变小.

Answer 1

请参阅: http ://jsfiddle.net/thirtydot/EDp8R/

• 这适用于IE6 +和所有现代浏览器!
• 我已将您要求的尺寸减半,以便更容易使用.
• text-align: justify结合.stretch是什么处理定位.
• display:inline-block; *display:inline; zoom:1修复inline-block了IE6/7,请看这里.
• font-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>

extra span(.stretch)可以替换为:after.

这仍然适用于与上述解决方案相同的所有浏览器.:after在IE6/7中不起作用,但distribute-all-lines无论如何它们都在使用,所以没关系.

请参阅: http ://jsfiddle.net/thirtydot/EDp8R/3/

有一个小缺点:after:要使最后一行在Safari中完美运行,你必须小心HTML中的空白.

具体来说,这不起作用:

<div id="container">
    ..
    <div class="box3"></div>
    <div class="box4"></div>
</div>

这样做:

<div id="container">
    ..
    <div class="box3"></div>
    <div class="box4"></div></div>

您可以将此用于任意数量的子项,div而无需boxN通过更改为每个子项添加类

.box1, .box2, .box3, .box4 { ...

至

#container > div { ...

这将选择任何div作为div的第一个子#container节点,而不是它下面的其他节点.要概括背景颜色,您可以使用CSS3 n阶选择器,尽管它仅在IE9 +和其他现代浏览器中受支持:

.box1, .box3 { ...

变为:

#container > div:nth-child(odd) { ...

见这里的的jsfiddle例子.

Answer 2

现在最简单的方法是使用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布局的规范已经改变了几次,因此可以通过另外包括更旧的语法来覆盖更多的浏览器:

http://css-tricks.com/old-flexbox-and-new-flexbox/

http://css-tricks.com/using-flexbox/

Answer 3

如果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:在多行上对齐方框(FIDDLE)

这里,除了calc()功能之外,media queries都是必要的.

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

这听起来像很多工作,但如果你使用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;
    }
}

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

有了它,您可以计算出每个州需要多少空间.

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

这个答案优于使用的接受答案的优点text-align:justify是,当你有多行的盒子时 - 最后一行的盒子没有'合理',例如:如果最后一排剩下2个盒子 - 我不希望第一个框位于左侧,下一个框位于右侧 - 而是按顺序依次相互关联.

关于浏览器支持:这将适用于IE9 +,Firefox,Chrome,Safari6.0 + - (详见此处)但是我注意到在IE9 +上媒体查询状态之间存在一些小问题.[如果有人知道如何解决这个我真的很想知道:)] < - 固定在这里

Answer 4

其他帖子提到了flexbox,但是如果需要多行项目,flexbox的space-between属性会失败(请参阅帖子的结尾)

到目前为止,唯一的解决方案是使用

CSS网格布局模块(Codepen演示)

基本上相关的代码必须归结为:

ul {
  display: grid; /* (1) */
  grid-template-columns: repeat(auto-fit, 120px); /* (2) */
  grid-gap: 1rem; /* (3) */
  justify-content: space-between; /* (4) */
  align-content: flex-start; /* (5) */
}

1)使容器元素成为网格容器

2)根据需要使用"自动"列数设置网格.这是为响应式布局完成的.每列的宽度为120px.(注意使用auto-fit(对应于auto-fill)(对于1行布局)将空轨道折叠为0 - 允许项目扩展以占用剩余空间.(查看此演示以查看我在说什么)).

3)设置网格行和列的间隙/檐槽 - 这里,因为需要'间隔'布局 - 间隙实际上是最小间隙,因为它将根据需要增长.

4)和5) - 类似于flexbox.

body {
  margin: 0;
}
ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, 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>

Codepen演示(调整大小以查看效果)

浏览器支持 - Caniuse

目前支持Chrome(Blink),Firefox,Safari和Edge!......得到IE的部分支持(见Rachel Andrew的这篇文章)

注意:

Flexbox的space-between属性适用于一行项目,但是当应用于包装它的项目的flex容器时 - (with flex-wrap: wrap) - 失败,因为你无法控制最后一行项目的对齐; 最后一行总是合理的(通常不是你想要的)

展示:

body {
  margin: 0;
}
ul {
  
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;
  
  list-style: none;
  width: 90vw;
  height: 90vh;
  margin: 2vh auto;
  border: 5px solid green;
  padding: 0;
  overflow: auto;
  
}
li {
  background: tomato;
  width: 110px;
  height: 80px;
  margin-bottom: 1rem;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Codepen(调整大小以查看我在说什么)

进一步阅读CSS网格:

• MDN
• Jen Simmons - 学习CSS网格
• CSS网格完整指南| Codrops CSS参考
• 网格完整指南 - CSS技巧