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

Question

我的网站只有在移动设备上显示时才会出现此问题。

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

My Wonderful Game X

PriceHistory

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

>

My Wonderful Game
         X
Price History

我的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 以在宽度计算中包含填充和边框。

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

Using float left and right, right container still slides under left contain on a mobile device

css

css-float