等间距div流体宽度怎么弄?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (8)
  • 关注 (0)
  • 查看 (110)

我有一个流体宽度容器DIV

在这里面我有4个div所有300 px 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被均匀地间隔在它们之间。我希望空间也是流动的,所以浏览器越小,空间也就越小。

提问于
用户回答回答于

见:http://jsfiddle.net/thirtydot/EDp8R/

  • 这在IE6+和所有浏览器!
  • 我已经把你要求的尺寸减半了,只是为了让它更容易处理。
  • text-align: justify结合.stretch是处理定位的方法。
  • display:inline-block; *display:inline; zoom:1修复inline-block
  • 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>

另外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 nth-order selector,尽管它仅在IE9+和其他现代浏览器中得到支持:

.box1, .box3 { ...

变成:

#container > div:nth-child(odd) { ...
用户回答回答于

用页边距0自动将容器div居中,然后从该区域向左向框2添加一个边距,并为所需空间向右添加框3。

#container { width:1200px; margin:0 auto; }
#container div { width:300px; height:250px; float:left; }
.box2 { margin-left:10px; }
.box3 { margin-right:10px; }

这样,容器内的所有div都是并排的,并且有了边距,就可以控制div之间的间距。

用户回答回答于

这对我工作了5幅不同大小的图像。

  1. 创建一个容器div
  2. 图像的无序列表
  3. 在css上,无序必须垂直显示,不带子弹。
  4. 集装箱DIV的合理内容

这是因为“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>
用户回答回答于

如果你知道每个“行”元素的数量和容器的宽度,你可以使用选择器向需要对齐的元素添加一个边距。

我有三行div,我想要证明是正确的,所以使用了:

.tile:nth-child(3n+2) { margin: 0 10px }

这允许每一行中的中心div有一个边界,强制第一和第三div位于容器的外部边缘。

对于边框、背景色等其他东西也很好。

用户回答回答于

jQuery你可以直接瞄准父级。

如果您不知道将动态添加多少个子级,或者无法计算它们的数量,这是非常有用的。

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'widthHeight

用户回答回答于

如果需要多行项目,flexbox的空间属性将失败

到目前为止解决方案使用

CSS网格布局模块

基本上,所需的相关代码可以归结为:

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)根据需要使用“自动”列数量设置网格。这是为响应性布局所做的。每列的宽度为120 px。(注意使用auto-fit(按规定)auto-fill)将空轨道折叠为0-允许项目展开以占用剩余空间。

3)为网格行和列设置gaps/gutters--这里,因为希望在布局之间有一个“空格”,所以实际的间隙将是最小间隙因为它会在必要的时候成长。

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),火狐,Safari和Edge!

注:

Flexbox‘sspace-between属性对于一行项非常有用,但是当应用于包装其项的Flex容器时-(与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>
用户回答回答于

如果CSS 3是一个选项,这可以使用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;
}

案例2:在多行上为方框辩护(FIDDLE)

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

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

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

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

下面是一个使用更少的示例:

@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;
    }
}

基本上,你首先需要决定boxes的宽度和你想要的boxes之间的最小边距。

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

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

优势在已接受的答案之上,该答案使用text-align:justify当你有超过一行的boxes--最后一行的boxes没有“justified”的时候,例如:如果最后一行还有两个boxes,我不希望第一个boxes在左边,下一个boxes在左边。在右边--但是boxes是按顺序排列的。

关于浏览器支持:这将适用于IE9+、Firefox、Chrome、Safari6.0+

用户回答回答于

现在最简单的方法是使用一个flexbox:

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

然后,CSS简单地:

#container {
    display: flex;
    justify-content: space-between;
}

演示:http://jsfiddle.net/QPrk 3/

不过,目前只有相对较新的浏览器(http://caniuse.com/Flexbox).此外,Flexbox布局规范已经更改了几次,因此可以通过另外增加一个旧语法来覆盖更多的浏览器:

http://css-tics.com/old-Flexbox-and-New-Flexbox/

http://css-tics.com/use-Flexbox/

扫码关注云+社区

领取腾讯云代金券