使用左右浮动，右容器仍在移动设备上的左容器下方滑动

Question

我的问题仅在移动设备上显示时才影响我的网站。

在桌面浏览器上，看起来像这样：

我的奇妙游戏X

PriceHistory

但是，在移动设备上，标题下方显示为关闭'X'按钮，如下所示：

>

我的精彩游戏

         X

价格历史

我的CSS：

 #TitleContainer {
    padding-bottom: 10px;
    float: left;
}

 #CloseControl {
    padding-right: 10px;
    float: right;
}

.PriceHistory {
    clear: both;
}

HTML：

<div id="GameDetailsSection">
    <div id="TitleContainer"> My Wonderful Game </div>
    <div id="CloseControl"> <button onClick={hide}> X </button></div>
    <div className="PriceHistory"> Price History </div> 
</div>

是否有办法使X始终位于左上角？

谢谢

Answer 1

如果两个元素的总宽度超过屏幕宽度，则第二个元素将显示在第一个元素的下方。您可以做两件事：

1。）更改顺序，以使至少右移的“ X”始终位于顶部。

或（可能更好）：

2。）如下定义左浮动元素的宽度（注意：此示例基于“ X”元素的30px宽度-只需根据需要进行更改即可！）：width: calc(100% - 30px)