等距DIV的流体宽度

我有一个宽度可变的容器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在它们之间均匀分布。我希望间隔也要流畅,以便将浏览器做得更小,空间也要变小。

回答:

  • 可以在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>

多余的span(.stretch)可以替换为:after。

这仍然工作在所有的浏览器相同的上述溶液。:after不适用于IE6 / 7,但distribute-all-lines无论如何他们都在使用,所以没关系。

有一个小缺点: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>

您可以将其用于任意数量的child,div而无需boxN通过更改将类添加到每个子类中

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

#container > div { ...

这将选择作为div的第一个子元素的任何div #container,并且其下没有其他任何div 。要概括背景色,可以使用CSS3 n阶选择器,尽管仅IE9 +和其他现代浏览器支持它:

.box1, .box3 { ...

变成:

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

以上是 等距DIV的流体宽度 的全部内容, 来源链接: utcz.com/qa/412205.html

回到顶部