Question

当重新调整浏览器的大小以使视口变小时，如何使彼此旁边浮动的DIV不会换行？

div {
  float: left;
}

例如，当浏览器完全最大化时，div的排列方式如下：

|div| |div| |div| |div| |div| |div| |div| |div|

但是当浏览器重新调整大小时会发生这种情况：

|div| |div| |div| |div| |div|
|div| |div| |div|

如何在浏览器重新调整大小时使div不能换行？

Answer 1

将它们包裹在另一个div中，该div具有指定的宽度（或最小宽度）。

<div class="parentContainer">
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
</div>

.parentContainer {
    /* The width of the parent needs to be equal to the total width of the children.
    Be sure to include margins/padding/borders in the total. */
    width: 600px;
    overflow: auto;
}

它还有助于溢出：在包含div上自动指定，以允许其高度与子浮动匹配。

Answer 2

我在游戏中已经很晚了，但是我发现这些有用：

假设您的导航结构如下：

<nav>
    <ul>
        <li><a href="#">Example Link</a></li>
        <li><a href="#">Example Link</a></li>
        <li><a href="#">Example Link</a></li>
    </ul>
</nav>

要使其显示内联链接，而不进行包装，您只需使用：

nav ul {
    white-space: nowrap;
}

nav ul li {
    display: table-cell;
}

无固定宽度或任何需要的东西。

小提琴：http://jsfiddle.net/gdf3prb4/

Answer 3

使容器div围绕它们

.container {
width: 500px;
white-space: nowrap;
overflow: visible/hidden/scroll - whichever suits you;
}

Answer 4

我意识到讨厌桌子很时髦，但它们很有用 http://jsfiddle.net/td6Uw/
而不是浮动div，将它们放在一个表中，并用一个大小约束的div包装表。 TR将阻止包装。
此外，我在TD中使用DIV来使单元格样式更容易。如果你花时间，你可以设置TD的样式，但我发现它们很难设计风格，通常只是使用我的小提琴所采用的DIV-in-TD方法。

Answer 5

实际上非常简单。代码示例：

let url = URL(string: "xxxx")

let jsonRequest = URLSession.shared.dataTask(with: url!){ (data, response, error) in
    if error != nil {
        print(error)
    } else {
        guard let data = data else {
            return
        }
        do {
            if let jsonResult = try JSONSerialization.jsonObject(with: data, options: JSONSerialization.ReadingOptions.mutableContainers) as? [[String: AnyObject]] {
                let responseMessage = jsonResult[0]["name"] as? String
                print(responseMessage)
            }        
        } catch {
            print("JSON Processing Failed")
        }
    }
}
jsonRequest.resume()

当浏览器重新调整大小时，如何防止浮动的div元素被包装？

5 个答案: