18

我有一个标题和一个应该水平放置在绝对定位的 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就可以了。

4

4 回答 4

12

我发现如何做到这一点。如果我在内部容器中使用display:block.containerfloat:left如果图像不适合宽度,图像将被包裹。如果我使用overflow: hidden,图像将在文本下方移动并隐藏。

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

于 2013-09-13T23:08:22.657 回答
3

如果您想隐藏溢出的元素并扩展剩余的元素以紧贴,您可以扩展Shalom Aleichem 的答案来做到这一点:

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

此答案中提供了更多详细信息,并且在此答案中解释了另一种使用 CSS 网格的方法

于 2017-09-06T19:26:41.103 回答
2

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

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

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

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

正如您所提到的,第三种选择是使用 javascript……我认为这将是最简单的方法。

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

于 2013-09-13T01:22:02.723 回答
0

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

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
于 2013-09-13T01:05:36.383 回答