jquery - 使用CSS根据父级的宽度显示内容

Question

是否可以根据父div的宽度用css显示某些内容？我在考虑媒体查询方面的问题，但我不希望整个设备宽度只是父 div 的宽度。

我可以用 jQuery 做到这一点 see fiddle (将 < 更改为 > 以查看不同的内容)，但想知道是否有一种方法可以用 css3 做类似的事情？

        <div id="parent">
            <div id="content">
            <table>
                <tbody>
                    <tr><td><span class="full">BAHRAIN</span><span class="abbrev">BHR</span></td></tr>
                    <tr><td><span class="full">BELGIUM</span><span class="abbrev">BEL</span></td></tr>
                    <tr><td><span class="full">EGYPT</span><span class="abbrev">EGY</span></td></tr>
                    <tr><td><span class="full">LITHUANIA</span><span class="abbrev">LTU</span></td></tr>
                    <tr><td><span class="full">SWEDEN</span><span class="abbrev">SWE</span></td></tr>
                </tbody>
                </table>
            </div>
        </div>

        <script>
        var w = $('#parent').width();
        console.log('width: ', w);
        if (w<200) 
        {
        $("#content").addClass("showsmall");
        }
        </script>

        <style>
        #parent {width: 300px;}
        .abbrev {display:none;}
        .showsmall .abbrev {display:block;}
        .showsmall .full {display:none;}
        </style>

Answer 1

你的.width永远不会接受IF，因为你在css中设置了width为200px

如果你想看到它动态你应该:

• 将CSS中的width替换为max-width
• 添加.resize事件

代码:

$(window).resize(function () {
    var w = $('#parent').width();
    console.log('width: ', w);
    if (w < 200) {
        $("#content").addClass("showsmall");
    } else {
        $("#content").removeClass("showsmall");
    }
});

jsFiddle example