流体宽度与等间距DIV [英] Fluid width with equally spaced DIVs

问题描述

我有一个流动的宽度容器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在它们之间均匀地间隔开。我想要的间距也是流畅的，因为浏览器越小，空间也越小。

解决方案

查看： http://jsfiddle.net/thirtydot/EDp8R/

• 这项功能适用于 IE6 +和所有现代浏览器！




• text-align：justify 结合 .stretch 是处理定位的操作。


• display：inline-block; * display：inline; zoom：1 修复修复 inline-block for IE6 / 7，
  
• font-size： 0; line-height：0 修复了IE6中的小问题。

  #container {border：2px dotted＃444; height：125px; text-align：justify; -ms-text-justify：distribute-all-lines; text-justify：distribute-all-lines; / *只是演示* / 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 =拉伸>< / span> < / div>  

额外的 span （ .stretch ）可以替换为：之后。

在与上述解决方案相同的所有浏览器中，此仍然有效。 ：之后在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 {... 
  

b $ b

到

  #container> div {... 
  

这将选择任何作为 #container div，下面没有其他人。要推广背景颜色，您可以使用 CSS3 nth-订单选择器，但只支持IE9 +和其他现代浏览器：

  .box1，.box3 。
  

变为：

  #container> div：nth-​​child（odd）{... 
  

请参阅这里 。

I have a fluid width container DIV.

Within this I have 4 DIVs all 300px x 250px...

<div id="container">
   <div class="box1"> </div>
   <div class="box2"> </div>
   <div class="box3"> </div>
   <div class="box4"> </div>
</div>

What I want to happen is box 1 to be floated left, box 4 to be floated right and box 2 and 3 to be spaced evenly between them. I want the spacing to be fluid as well so as the browser is made smaller the space becomes smaller also.

解决方案

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

• This works in IE6+ and all modern browsers!
• I've halved your requested dimensions just to make it easier to work with.
• text-align: justify combined with .stretch is what's handling the positioning.
• display:inline-block; *display:inline; zoom:1 fixes inline-block for IE6/7, see here.
• font-size: 0; line-height: 0 fixes a minor issue in 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>


   

The extra span (.stretch) can be replaced with :after.

This still works in all the same browsers as the above solution. :after doesn't work in IE6/7, but they're using distribute-all-lines anyway, so it doesn't matter.

See: http://jsfiddle.net/thirtydot/EDp8R/3/

There's a minor downside to :after: to make the last row work perfectly in Safari, you have to be careful with the whitespace in the HTML.

Specifically, this doesn't work:

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

And this does:

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

---

You can use this for any arbitrary number of child divs without adding a boxN class to each one by changing

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

to

#container > div { ...

This selects any div that is the first child of the #container div, and no others below it. To generalize the background colors, you can use the CSS3 nth-order selector, although it's only supported in IE9+ and other modern browsers:

.box1, .box3 { ...

becomes:

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

See here for a jsfiddle example.

这篇关于流体宽度与等间距DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！