13

我有两个内联 div，它们的宽度超过了父级的宽度。因此第二个 div 跳转到下一行：http: //jsfiddle.net/uVqG6/2/

如何将两个 div 保持在同一行？

添加overflow:hidden;到 div.a 只是隐藏了第二个 div。

4

4 回答 4

12

有几种方法可以做到这一点。首先，您可以使用display: inline-block;orfloat: left;让 div 并排放置。它们的工作方式不同，因此请务必为您的情况使用正确的。

其次，除非包含的 div (a) 大到足以在同一行包含两个 div，否则这些都不起作用。或者，您可以overflow: hidden;在包含的 div (a) 上使用。

编辑：

我已经更新了你的例子：http: //jsfiddle.net/uVqG6/11/

我不得不使用white-space: nowrap;，因为内部 div 正在包装。

这是另一个答案，它也回答了您的问题：CSS：如何阻止文本占用超过 1 行？

请记住 usingdisplay: inline-block基本上将元素视为文本，因此大多数文本格式的 css 属性都将应用于它。

于 2012-12-26T18:54:59.407 回答
9

您可以使用position: absolute;它，否则除了增加容器 div 宽度或制作它之外别无他法nowrap

演示

使用z-index 演示

CSS

.a {
    width: 100px;
    height: 50px;
    border: solid 1px #345;
    position: relative;
}

.b {
    width: 60px;    
    height: 50px;
    background-color: red;
}
.c {
    width: 50px;    
    height: 50px;
    background-color: green;
    position: absolute;
    right: 0;
    top: 0;
}
于 2012-12-26T18:55:11.643 回答
8

内联元素的行为方式与文本非常相似。如果您想阻止它们换行，请删除您用于格式化的空格，或添加white-space:nowrap;到.a.

这是一个演示：http: //jsfiddle.net/bfkgT/

于 2012-12-26T18:54:46.830 回答
6 
.a {
width: 100px;
height: 50px;
border: solid 1px #345;
white-space: nowrap;
overflow:hidden; }

这是做你想做的吗？

于 2012-12-26T18:53:13.023 回答