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