Question

我有一个标题和一个应该在绝对定位的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，那就没关系。

Answer 1

我已经找到了如何做到这一点。如果我在内部容器中的display:block和.container上使用float:left，那么如果图像不适合宽度，图像将会被包裹。如果我使用overflow: hidden，图像将在文本下移动并隐藏。

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

Answer 2

我可以想到两种方法可以用来解决这个问题。第一种方法是为容器的任何图像设置最大宽度，但这并不会隐藏图像：

.container img{max-width:100%;}

第二种选择是使用基于屏幕尺寸的响应式设计。与Thanos提到的类似，但在同一样式表中。但是你的问题没有提到窗口大小的变化，只是图像大小的变化，所以这可能不是你想要的......

@media screen and (max-width:500px){    
    .container img{display:none;}
}

第三种选择是使用javascript，如你所提到的......我认为这是最简单的方法。

看看 - http://css-tricks.com/forums/topic/conditionally-resize-image-based-on-width/

Answer 3

如果您想hide overflowing elements and expand remaining elements to fit snugly，可以展开Shalom Aleichem's answer来解决问题：

＆＃13;

ul {
  border: 1px solid red;
  width: 350px;
  height: 100px;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

ul > li  {
  border: 1px solid blue;
  display: block;
  flex: 1 0 100px;
  height: 100px;
  box-sizing: border-box;
}

＆＃13;

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
</ul>

＆＃13;

More details available at this answer和another approach using CSS grid is explained at this answer。

Answer 4

当屏幕尺寸太小或太大时，您需要做的是基本上调用css文件，以隐藏/显示不适合屏幕的内容。

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

如果元素仅使用css不适合可用宽度，我可以隐藏它吗？

4 个答案: