javascript - 中心元素，直到它遇到障碍

Question

容器内有两个元素 - 一个(蓝色)需要保持在左侧，另一个(绿色)相对于外部红色居中。但是，如果屏幕足够小，居中的容器(绿色)不能与左侧的容器(蓝色)重叠，它应该始终位于蓝色的右侧。有什么想法可以实现吗？如果不使用 css，那么可以使用 js？

大屏幕

小屏幕

到目前为止我得到了:

Fiddle

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

这使绿色容器居中，但在较小的屏幕上与蓝色容器重叠。

编辑:添加了一些中心标记以便于查看中心

Answer 1

您可以使用绝对居中技术的变体:

.centered {
    position: absolute;
    left: 150px;  /* This is the position of the collision with the obstacle */
    right: 150px; /* Same value as above, in order to center */
    margin: auto; /* This centers */
    width: 140px; /* It needs a width */
}

Demo

此技术仅在障碍物位于左侧而不是右侧时才有效。

考虑向容器添加 min-width 以防止 .centered 溢出。