当我调整窗口大小时，如何防止子div在彼此之下移动？

Question

我无法让我的div按照我希望的方式行事。下面是我的页面的模型。页面看起来很棒，直到我让窗口变小。此时，子div B将移动到sub-div A下面，这是我不想要的。

即使窗口尺寸减小，我如何保持sub-div A和​​sub-div B相互对齐？

+--------------------------------------------------------------+
| div (container)                                              |
| +----------------------------------------------------------+ |
| | div                                                      | |
| +----------------------------------------------------------+ |
|                                                              |
| +----------------------------------------------------------+ |
| | super div                                                | |
| | +------------------------+    +------------------------+ | |
| | | sub-div A - float left |    | sub div-B - float left | | |
| | +------------------------+    +------------------------+ | |
| +----------------------------------------------------------+ |
|                                                              |
| +----------------------------------------------------------+ |
| | div - clear both                                         | |
| +----------------------------------------------------------+ |
|                                                              |
| +----------------------------------------------------------+ |
| | div - clear both                                         | |
| +----------------------------------------------------------+ |
|                                                              |
+--------------------------------------------------------------+

Answer 1

您使用float作为子div，并且根据定义，当它们无法适应屏幕时，它们会使它们彼此包裹。要确保它们保持在同一行，请移除float并同时将其display: inline-block和div加上white-space: nowrap;添加样式{。}}。