Question

我正在寻找一种优雅的方式来将两个div放在另一个之外而不用换行。第一个div是一个图标，第二个是未知大小的文本。

他们不应该分成两行而是隐藏，如果没有足够的地方。我尝试使用此example，但它无法正常工作。

有一个类似的question，但它的大小未知是不一样的。

感谢帮助

Answer 1

像这样写：

.container {
  white-space: nowrap;
}
.d1,
.d2{
    display: inline-block;
    *display:inline;/*for IE 7 */
    *zoom:1;/*for IE 7 */
    vertical-align:top;
}
.d1 {            
    background-color:#ff0;
}

.d2 {
    background-color:red;
}

选中此http://jsfiddle.net/xcSXA/5/

Answer 2

float: left不会给你，你需要什么试试display: inline

http://jsfiddle.net/xcSXA/3/

Answer 3

不要浮动div，而是将它们显示为内联块，以便它们不会换行。此外，将容器的“白色空间”样式设置为“nowrap”以防止换行。

<强> HTML

<div class="container">
    <div class="d1">icon</div>
    <div class="d2">This can be very very very very large.</div>
</div>

<强> CSS

.container {
  white-space:nowrap;
  overflow:hidden;
  width: 100px;
}

.d1 {
    display: inline-block;
    background-color:#ff0;
}

.d2 {
    display: inline-block;
    background-color:red;
}

工作示例： http://jsfiddle.net/C4Wfa/

Answer 4

我认为，以下CSS就是您所需要的。

.container {
  display:inline-block;
  overflow:hidden;
  white-space: nowrap;
}

.d1 {
  display: inline-block;
  background-color:#ff0;
}

.d2 {
  white-space: nowrap;
  display: inline-block;
  background-color:red;
}

Answer 5

您可以尝试

float: left;

并使用此样式创建外部div：

height: 1%; overflow: hidden;

见这里：http://www.google.de/imgres?imgurl=http://www.mikepadgett.com/legacy/images/client_images/float_problem.gif&imgrefurl=http://www.mikepadgett.com/technology/technical/alternative-to-the-pie-clearfix-hack/&usg=__NW1NVgWIKW-rBh0Cp60ouDdIGvg=&h=300&w=412&sz=6&hl=en&start=0&sig2=4nJ8a7o2JcYBdlBaPaL3VA&zoom=1&tbnid=raa9wIX8T8PbWM:&tbnh=103&tbnw=141&ei=uGlLT9j4MsWEhQfl7eGYBw&prev=/search%3Fq%3Dfloat%2Bleft%26um%3D1%26hl%3Den%26sa%3DN%26biw%3D1920%26bih%3D1075%26tbm%3Disch&um=1&itbs=1&iact=rc&dur=152&sig=110912085308513740608&page=1&ndsp=57&ved=1t:429,r:1,s:0&tx=64&ty=50

Answer 6

.d1和.d2你必须给出一定的宽度，但你必须确保.d1和.d2的宽度（+边距和填充）不大于容器类，否则它们将无法彼此相邻设置。

两个div除了另一个没有包装

6 个答案: