隐藏溢出时如何防止div包装？

Currently I have a row containing several divs. I'm trying to prevent the contained divs from wrapping. I also do not want a scrollbar. I've tried overflow hidden and set a width on the row.

目前我有一行包含几个div。我试图阻止包含的div包装。我也不想要滚动条。我试过隐藏溢出并在行上设置宽度。

EDIT: Constraints dictate that this must be done without tables, javascript, or external libraries.

编辑:约束规定必须在没有表,javascript或外部库的情况下完成此操作。

Is there a way to do this with css without resorting to tables?

有没有办法用css做这个而不诉诸表?

JSFiddle: http://jsfiddle.net/ozsumdfb/

HTML:

<div class="row">
    <div class="square">
    </div>
    <div class="square">
    </div>
    <div class="square">
    </div>
    <div class="square">
    </div>
    <div class="square">
    </div>
    <div class="square">
    </div>
</div>

CSS:

.square {
    width:100px;
    height:100px;
    float:left;
    margin-left:3px;
    background-color: #6C6;
}
.row {
    width:500px;
    overflow:hidden;
}

2 个解决方案

#1

insteed of float:left you could try display:inline-block then just add:

浮动:左边你可以尝试显示:内联块然后只需添加:

.row {white-space:nowrap; }

.row {white-space:nowrap; }

is this what you are looking for?

这是你想要的?

fiddle

#2

Try this, I added a wrapper after row had them both with 618px since you had 6 squares padding left 3px (that is (100 + 3)*6 = 618). Hope this helps.

试试这个,我添加了一个包装器,因为你有6个方块填充左边3px(即(100 + 3)* 6 = 618),所以它们都有618px。希望这可以帮助。

HTML

<div class="row">
    <div class="wrapper">
    <div class="square">
    </div>
    <div class="square">
    </div>
    <div class="square">
    </div>
    <div class="square">
    </div>
    <div class="square">
    </div>
    <div class="square">
    </div>
   </div>
</div>

CSS

.square {
    width:100px;
    height:100px;
    float:left;
    margin-left:3px;
    background-color: #6C6;
}
.row { 
    width:618px; 
    overflow-x:auto; 
    overflow-y:hidden;
}
.wrapper { 
    width: 618px; 
}

#1