一个容器内有两个元素,其中一个蓝色的需要靠左,另一个绿色的相对于外部的红色居中。但是,如果屏幕太小,居中的容器(绿色)不能与左侧的容器(蓝色)重叠,它应该始终在蓝色的右侧。有没有办法实现这个呢?如果不是用CSS,那么可能是用JS吗?
大屏幕
小屏幕
<div class="red">
<div class="blue">
texttexttexttext
</div>
<div class="centered">
Centered Container of fixed width
</div>
</div>
.red {
height: 100px;
text-align: center;
border: 3px solid red;
position: relative;
}
.blue {
background: blue;
height: 100%;
float: left;
}
.centered {
display: inline-block;
border: 1px solid green;
position: absolute;
left: calc(50% - 70px);
width: 140px;
top: 0;
}
这会将绿色容器居中,但在较小的屏幕上会与蓝色重叠。
编辑:添加一些中心标记以便更容易看到中心位置