按钮跳转到新行（css）

Question

我的应用程序应该在小屏幕上看起来很好。当它是正常尺寸时，一切看起来都很好。但是当屏幕太小时我的按钮开始变得混乱。

红色方块表示图像，黄色表示一些文本，蓝色表示按钮。

通常，会显示最高版本（正确版本） 当屏幕较小时，第二种情况发生，当底部按钮跳转到新行时。

理想情况下，两个按钮应保持一个在另一个之上。这是我的css代码：

{
    background-color: #6b89ac;
    border: 1px solid #89a9d0;
    border-bottom-color: #1d4474;
    color: white;
    font-weight: bold;
    text-decoration: none;
    padding: 2px 5px 2px 5px;
    margin-bottom: 3px;
    text-align: center;
    display: inline-block;
    width: 100px;
}

Answer 1

在第一种情况下，第二个蓝色框被保持在右侧，因为红色框足够高以防止它被清除。

为确保蓝色框保持在右侧，请将它们向右浮动{float:right} 然后，您应该将每个集合包装在一个div中，以便第二个红色框不会运行到第一个组的中间。并且您可能需要对该div应用cleafix解决方案，以确保其高度随着浮动的增加而增加。

clearfix参考文献：
1. What methods of ‘clearfix’ can I use?
2. The New Clearfix Method

（我更喜欢＃2）

Answer 2

你可以给身体一个固定的宽度。然后，当窗口宽度减小时，您的布局不会更改。您可以使用overflow-x属性来控制滚动条行为

Answer 3

它发生在小屏幕上，因为按钮被推得足够远以在图片下滑动。尝试将文本和按钮一起包装在div中。然后按钮将被新div的左边缘绑定。

根据您的代码，新div可能还需要overflow: hidden。