html - 如果元素不适合仅使用CSS的可用宽度，是否可以隐藏该元素？

我有一个页眉和一个图像，应该在绝对定位的div上水平放置。我在固定宽度的细分中显示文本。如果图像无法通过CSS3放入绝对定位的容器中，我将尝试隐藏该图像，但我不能。我知道可以使用JS，但是也许有CSS3的方式？

.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;
}

<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="">
    </div>
  </div>
</div>

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

如果仅在IE10中可以，则可以。

最佳答案

我发现如何做到这一点。如果我在内部容器的display:block和.container上使用float:left，则如果图像不适合宽度，则将对其进行包装。如果使用overflow: hidden，则图像将在文本下方移动并隐藏。

这是证明此技巧有效的小提琴:http://jsfiddle.net/8r72g/8/

关于html - 如果元素不适合仅使用CSS的可用宽度，是否可以隐藏该元素？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18776322/