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
0
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?
这是你想要的?
#2
0
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
0
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?
这是你想要的?
#2
0
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;
}