如果元素不适合使用css的可用宽度，我可以隐藏元素吗？ [英] Can I hide the element if it doesn't fit the available width using css only?

问题描述

我有一个标题和一个图像，应该水平放置在绝对定位的div。我在固定宽度的subdiv中显示文本。我试图隐藏图像，如果它不适合通过CSS3的手段绝对定位的容器，但我不能。我知道这是可能的JS，但也许有一个CSS3的方式？

I have a header and an image that should be horizontally laid out on the absolutely positioned div. I'm showing the text in the subdiv with the fixed width. I'm trying to hide the image if it doesn't fit into the absolutely positioned container by the means of CSS3, but I can't. I know it's possible to do with JS, but maybe there is a CSS3 way?

<div style="position: relative; width: 500px; height:500px;">
    <div class="container">
        <div class="part-one">
            <h1 class="header">This is some header</h1>
        </div>
        <div class="utilizationContainer" class="part-two">
            <img src=""></h1>
        </div>
    </div>
</div>

.container {
    display: -ms-flexbox;
    -ms-flex-direction: row;
    -ms-flex-pack: justify;
    overflow-x: hidden;
    position: absolute;
    left: 60px;
    right: 60px;
    bottom: 0px;
    height: 400px;
}    

.part-one {
    left: 0px;
    bottom: 100px;
    width: 300px;
    font-size: 22pt;
    color: white;
    min-width: 300px;
}    

.part-two {
    max-width: 400px;
    width: 400px;
    min-width: 50%;
}    

.header {
    font-size: 50pt;
    color: blue;
    margin-bottom: 10px;
}

这里是小提琴： http://jsfiddle.net/8r72g/5/

没问题在IE10。

推荐答案

我找到了如何做。如果我在 .container 和 float：left 上使用 display：block $ c>在内部容器中，如果图像不适合宽度，将被包装。如果我使用 overflow：hidden ，图像将移动到文本下面并隐藏。

I've found how this can be done. If I use display:block on the .container and float:left in the inner containers, the image will be wrapped if it doesn't fit the width. And if I use overflow: hidden, the image will be moved under the text and hidden.

fiddle that proves this trick works： http://jsfiddle.net/8r72g/8/

Here is the fiddle that proves this trick works: http://jsfiddle.net/8r72g/8/

这篇关于如果元素不适合使用css的可用宽度，我可以隐藏元素吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！