Fluid width with equally spaced DIVs

前端 未结 7 1743
耶瑟儿~
耶瑟儿~ 2020-11-22 01:21

I have a fluid width container DIV.

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

7条回答
  •  情话喂你
    2020-11-22 02:03

    The easiest way to do this now is with a flexbox:

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

    The CSS is then simply:

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

    demo: http://jsfiddle.net/QPrk3/

    However, this is currently only supported by relatively recent browsers (http://caniuse.com/flexbox). Also, the spec for flexbox layout has changed a few times, so it's possible to cover more browsers by additionally including an older syntax:

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

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

提交回复
热议问题