CSS动态创建列 [英] CSS to dynamically create columns

问题描述

我有三个<div>元素:

<div class="foo">A</div>
<div class="foo">B</div>
<div class="foo">C</div>

期望的行为

我想写一些CSS来随着屏幕尺寸的变化产生以下效果:

Desired behavior

I'd like to write some CSS to create the following effect as the screen size changes:

我知道如何实现以下(不需要的)行为:

I know how to implement the following (undesired) behavior:

div.foo {
   display: inline-block;
   vertical-align: top;
   width: 300px;
}

是否有一种简单的方法(优选不带任何Javascript库)来实现我所需的行为，该行为将在主要浏览器(Chrome，Safari，Firefox，IE9 +)上运行?

Is there a simple way (pref. without any Javascript library) to achieve my desired behavior that will work on major browsers (Chrome, Safari, Firefox, IE9+)?

推荐答案

将A和B包装到其自己的容器中.

Wrap the A and B into it's own container.

<div class="foo-wrap">
    <div class="foo">A</div>
    <div class="foo">B</div>
</div>
<div class="foo">C</div>

然后使用媒体查询来控制A/B列在较小屏幕上的显示:

Then use a media query to control the display of the A/B column on smaller screens:

.foo-wrap {
    display: inline-block;
}

div.foo {
   display: inline-block;
   vertical-align: top;
   width: 300px;
}

@media all and (max-width: 925px) {
    .foo-wrap {
        width: 300px;
    }
}

演示: http://jsfiddle.net/axertion/j48da85n/1/

这篇关于CSS动态创建列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！