使用左右浮动，右侧容器仍然在移动设备上的左包含下滑动

Question

我有这个问题，它只影响我的网站在移动设备上显示。

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

我的精彩游戏X

历史价格

但是，在移动设备上，标题下方会显示关闭"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"(#CloseControl(始终位于右上角？

谢谢

Answer 1

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

1.( 更改顺序，以便至少右浮动的"X"始终保持在顶部。

或(可能更好(：

2.( 定义左浮动元素的宽度如下(注意：此示例基于 "X" 元素的 30px 宽度 - 只需根据需要进行更改width: calc(100% - 30px)！这样，左侧浮动元素的宽度始终比全宽小 30px，这将允许 30px 宽的元素("X"(在其右侧浮动。

注意：不要忘记在两个元素上使用box-sizing: border-box，以便在宽度计算中包含填充和边框。