Question

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

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

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

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;
}

Answer 1

而不是float:left您可以尝试display:inline-block然后添加：

.row {white-space：nowrap; }

这就是你要找的东西吗？

fiddle

Answer 2

试试这个，我在wrapper之后添加了一个row，因为你有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; 
}

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

2 个答案: