溢出 - 隐藏和浮动左元素

时间:2012-05-27 17:09:16

标签: css

我在父div中有一系列div作为列,设置为隐藏溢出,但是当到达容器的右侧而不是溢出时,列会换行。

这是代码的基本版本。

.column{
width:200px;
float:left;
}
<div style="overflow:hidden">
<div class="column"></div>
<div class="column"></div>
</div>

2 个答案:

答案 0 :(得分:1)

你应该使用inline-block而不是float:left;

http://jsfiddle.net/RgJk9/1/

.container { width: 300px; overflow: scroll; white-space: nowrap; }

.column{
  background-color: red;
  width:200px;
  height: 200px;
  display: inline-block;
}​

使用HTML:

<div class="container">
  <div class="column"></div>
  <div class="column"></div>
</div>​

答案 1 :(得分:1)

尝试

div.column {
    white-space: nowrap;
    overflow-x: hidden;
    width: 200px;
}

这将隐藏任何溢出,并强制文本不换行,将它全部保存在一行上。

对于较新的浏览器,CSS支持ellipsis text-overflow的{​​{1}}属性,以增添良好的触感。