使用 css 根据父级的宽度显示内容答案

【问题标题】：show content based on width of parent with css使用 css 根据父级的宽度显示内容
【发布时间】：2013-06-24 06:10:37
【问题描述】：

是否可以根据父 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>

【问题讨论】：

CSS 只能通过媒体查询检查视口尺寸，而不是任何特定元素的尺寸。你见过<abbr>标签吗？ cssdeck.com/labs/ovzhnmfa

标签： jquery css media-queries

【解决方案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

【讨论】：

【解决方案2】：

这你想要什么？ DEMO。 这是一个仅使用 CSS 的解决方案。

如果您按字面意思设置width，您将无法让浏览器自动调整大小。

我稍微更改了对象的标记以使示例更简单：

<div class="parent">
    <div class="child">
        <span class="text">
            This is a normal text.
        </span>
    </div>
    <br />
    <div class="fixed-child">
        <span class="text">
            This is a text very laaaaaaaaaaaaaaaaaaaaaaaaaaaaarge!
        </span>
    </div>
</div>

这是 CSS：

.parent > div {
    height: 50px;
    margin-top: .325em;
    border: 1px solid black;
    display: inline-block;
}

如您所见，我设置了height 以使示例看起来更好。

做个好人，莱昂纳多

【讨论】：