I have a container DIV with a fixed height and width (275x1000px). In this DIV I want to put multiple floating DIVs each with a width of 300px, and have a horizontal (x-axis) scrollbar appear to allow the user to scroll left and right to view everything.
我有一个高度和宽度固定的容器DIV(275x1000px)。在这个DIV中,我想放置多个浮动DIV,每个DIV的宽度为300px,并且有一个水平(x轴)滚动条,允许用户左右滚动查看所有内容。
This is my CSS so far:
到目前为止这是我的CSS:
div#container {
height: 275px;
width: 1000px;
overflow-x: auto;
overflow-y: hidden;
max-height: 275px;
}
div#container div.block {
float: left;
margin: 3px 90px 0 3px;
}
The problem is that the floating DIVs will not continue past the width of the container. After putting three of the floating DIV's they will continue on beneath. If I change overflow-y to auto, then the vertical scrollbar appears and I can scroll down.
问题是浮动DIV不会继续超过容器的宽度。在放置三个浮动DIV后,它们将继续在下方。如果我将overflow-y更改为auto,则会出现垂直滚动条,我可以向下滚动。
How can I change this to make the floating DIVs continue on without going beneath each other?
如何更改此设置以使浮动DIV继续运行而不会相互低于?
9 个解决方案
#1
38
div#container {
height: 275px;
width: 1000px;
overflow: auto;
white-space: nowrap;
}
div#container span.block {
width: 300px;
display: inline-block;
}
The trick here is only elements that behave as inline by default will behave properly when set to inline-block in Internet Explorer, so the inner containers need to be <span> instead of <div>.
这里的诀窍是,在Internet Explorer中设置为内联块时,默认情况下行为为内联的元素将正常运行,因此内部容器需要而不是
#2
8
You need an extra div with a large width to contain the blocks, then they will extend wider than the container div and not drop down to a new line.
你需要一个宽大的额外div来包含块,然后它们将比容器div扩展得更宽,而不是下降到一个新行。
The HTML:
HTML:
<div id="container">
<div id="width">
<div class="block">
<!-- contents of block -->
</div>
<div class="block">
<!-- contents of block -->
</div>
<div class="block">
<!-- contents of block -->
</div>
<!-- more blocks here -->
</div>
</div>
The CSS:
CSS:
#container {
height: 275px;
width: 1000px;
overflow-x: auto;
overflow-y: hidden;
max-height: 275px;
}
#container #width {
width:2000px; /* make this the width you need for x number of blocks */
}
#container div.block {
float: left;
margin: 3px 90px 0 3px;
}
#3
6
#row {
white-space: nowrap; /* important */
overflow: auto;
}
.items {
display: inline-block;
}
<div id="row">
<div class="items">
<img src="//placehold.it/200/100" alt="item 1" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 2" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 3" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 4" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 5" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 6" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 7" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 8" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 9" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 10" />
</div>
</div>
The trick here is the "white-space: nowrap" property of the parent which simply tells all it's child elements to continue horizontally and the "display: inline-block" property of it's children. You don't need to add any other property to make this work.
这里的技巧是父级的“white-space:nowrap”属性,它只是告诉所有它的子元素水平继续,并且它的子节点的“display:inline-block”属性。您无需添加任何其他属性即可使其工作。
JS Fiddle: http://jsfiddle.net/2c4jfetf/
JS小提琴:http://jsfiddle.net/2c4jfetf/
#4
1
Wrap your floated divs in another div with the wider width.
将浮动的div包裹在另一个宽度更宽的div中。
<div style="width:230px;overflow-x:auto;background-color:#ccc;">
<div style="width:400px">
<div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
<div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
<div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
</div>
</div>
#5
0
The table solution should work very well.
表解决方案应该可以很好地工作。
If you don't want to use tables, you can also put all .block divs in another div inside the #container and give that "in-between-div" a fixed - calculated - width using javascript after loading the page.
如果您不想使用表,您还可以将所有.block div放在#container中的另一个div中,并在加载页面后使用javascript将“in-between-div”赋予固定计算的宽度。
Of course if you already know how many .blocks you have / if the number is fixed, you can give the "in-between-div" a fixed width using css.
当然,如果你已经知道你有多少.blocks /如果数字是固定的,你可以使用css给“in-between-div”一个固定的宽度。
#6
0
It sounds like you are doing gallery with div's?
这听起来像你在做div的画廊?
What exactly are you using the divs for?
你究竟用什么div?
It may be easier to use a ul/li with spans inside of the li to get the same effect without all the headaches of floating divs.
在li内部使用带有跨距的ul / li可能更容易获得相同的效果而没有浮动div的所有头痛。
#7
0
Use:
使用:
div#container {
overflow: auto;
}
Or add a clearing div below the three divs with the style:
或者使用样式在三个div下面添加一个清除div:
{
clear: both
}
#8
0
Put the divs you want to scroll in a table like so:
将要滚动的div放在表格中,如下所示:
<div style='width:1000;border:2 solid red;overflow-x:auto'>
<table><tr>
<td><div style='width:300;height:200;border:1 solid black'>Cell 1 </div></td>
<td><div style='width:300;height:200;border:1 solid black'>Cell 2 </div></td>
<td><div style='width:300;height:200;border:1 solid black'>Cell 3 </div></td>
<td><div style='width:300;height:200;border:1 solid black'>Cell 4 </div></td>
<td><div style='width:300;height:200;border:1 solid black'>Cell 5 </div></td>
</tr></table>
</div>
Edit: I tried 3 of these suggested solutions - they all work fine in Google Chrome - but the first one (container1) doesn't work in IE (go figure) - so the SPAN solution gets my vote :-) :
编辑:我尝试了其中3个建议的解决方案 - 它们在谷歌浏览器中都运行良好 - 但第一个(容器1)在IE中不起作用(如图) - 所以SPAN解决方案得到我的投票:-):
<html>
<body>
<style>
div#container1
{
height: 275px;
width: 100%;
overflow: auto;
white-space: nowrap;
border:2 solid red;
}
div#container1 div.block
{
width: 300px;
height: 200px;
display: inline-block;
border: 1 solid black;
}
div#container2
{
height: 275px;
width: 100%;
overflow: auto;
white-space: nowrap;
border:2 solid red;
}
div#container2 span.block
{
width: 300px;
height: 200px;
display: inline-block;
border: 1 solid black;
}
div#container3
{
height: 275px;
width: 100%;
overflow: auto;
white-space: nowrap;
border:2 solid red;
}
div#container3 div.block
{
width: 300px;
height: 200px;
display: inline-block;
border: 1 solid black;
}
</style>
<p>
<div id='container1'>
<div class='block'>Cell 1 </div>
<div class='block'>Cell 2 </div>
<div class='block'>Cell 3 </div>
<div class='block'>Cell 4 </div>
<div class='block'>Cell 5 </div>
</div>
<p>
<div id='container2'>
<span class='block'>Cell 1 </span>
<span class='block'>Cell 2 </span>
<span class='block'>Cell 3 </span>
<span class='block'>Cell 4 </span>
<span class='block'>Cell 5 </span>
</div>
<p>
<div id='container3'>
<table><tr>
<td><div class='block'>Cell 1 </div></td>
<td><div class='block'>Cell 2 </div></td>
<td><div class='block'>Cell 3 </div></td>
<td><div class='block'>Cell 4 </div></td>
<td><div class='block'>Cell 5 </div></td>
</tr></table>
</div>
</body>
</html>
Edit 2:
编辑2:
I ran this test page through browsershots.org, to see how different browsers handle it. Conclusion: Browser compatibility sucks. :-)
我通过browsershots.org运行了这个测试页面,看看不同的浏览器如何处理它。结论:浏览器兼容性很糟糕。 :-)
http://browsershots.org/http://dot-dash-dot.com/files/test_div2.htm
http://browsershots.org/http://dot-dash-dot.com/files/test_div2.htm
The table solution worked more often - but the span option (which is cleaner) only broke on browsers I've never heard of. :-)
表解决方案更常用 - 但是span选项(更干净)只能在我从未听说过的浏览器上打破。 :-)
#9
0
My Ex:
我的前夫:
div width: 850px gridview templatedcolumn ItemTemplate
div width:850px gridview templatedcolumn ItemTemplate
<span class="buttonspanlt"></span><asp:Button ID="imgEditSave" runat="server" Text="Edit SubStatus" CssClass="buttoncenter" OnClick="imgEditSave_OnClick"/><span class="buttonspanrt"></span>
<span style="display:none;float:left;clear:left;" id="spangrdCancel" runat="server"><span class="buttonspanlt"></span><asp:Button ID="imgCancel" runat="server" Text="Cancel" class="buttoncenter"/><span class="buttonspanrt"></span></span>
end ItemTemplate end templatedcolumn end gridview end div
结束ItemTemplate结束templatedcolumn结束gridview结束div
the button has left middle(actual button) right spans which where not floating as there was outer div with fixed width.
按钮左侧中间(实际按钮)右侧跨度,其中没有浮动,因为外部div具有固定宽度。
I had to use additional div with width 140px outside the button , inside the itemtemplate then it worked.
我不得不在按钮外面使用宽度为140px的额外div,在itemtemplate内部然后它工作。
Hope this helps!!!
希望这可以帮助!!!
Thank You Harish
谢谢哈里什
#1
38
div#container {
height: 275px;
width: 1000px;
overflow: auto;
white-space: nowrap;
}
div#container span.block {
width: 300px;
display: inline-block;
}
The trick here is only elements that behave as inline by default will behave properly when set to inline-block in Internet Explorer, so the inner containers need to be <span> instead of <div>.
这里的诀窍是,在Internet Explorer中设置为内联块时,默认情况下行为为内联的元素将正常运行,因此内部容器需要而不是
#2
8
You need an extra div with a large width to contain the blocks, then they will extend wider than the container div and not drop down to a new line.
你需要一个宽大的额外div来包含块,然后它们将比容器div扩展得更宽,而不是下降到一个新行。
The HTML:
HTML:
<div id="container">
<div id="width">
<div class="block">
<!-- contents of block -->
</div>
<div class="block">
<!-- contents of block -->
</div>
<div class="block">
<!-- contents of block -->
</div>
<!-- more blocks here -->
</div>
</div>
The CSS:
CSS:
#container {
height: 275px;
width: 1000px;
overflow-x: auto;
overflow-y: hidden;
max-height: 275px;
}
#container #width {
width:2000px; /* make this the width you need for x number of blocks */
}
#container div.block {
float: left;
margin: 3px 90px 0 3px;
}
#3
6
#row {
white-space: nowrap; /* important */
overflow: auto;
}
.items {
display: inline-block;
}
<div id="row">
<div class="items">
<img src="//placehold.it/200/100" alt="item 1" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 2" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 3" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 4" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 5" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 6" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 7" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 8" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 9" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 10" />
</div>
</div>
The trick here is the "white-space: nowrap" property of the parent which simply tells all it's child elements to continue horizontally and the "display: inline-block" property of it's children. You don't need to add any other property to make this work.
这里的技巧是父级的“white-space:nowrap”属性,它只是告诉所有它的子元素水平继续,并且它的子节点的“display:inline-block”属性。您无需添加任何其他属性即可使其工作。
JS Fiddle: http://jsfiddle.net/2c4jfetf/
JS小提琴:http://jsfiddle.net/2c4jfetf/
#4
1
Wrap your floated divs in another div with the wider width.
将浮动的div包裹在另一个宽度更宽的div中。
<div style="width:230px;overflow-x:auto;background-color:#ccc;">
<div style="width:400px">
<div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
<div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
<div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
</div>
</div>
#5
0
The table solution should work very well.
表解决方案应该可以很好地工作。
If you don't want to use tables, you can also put all .block divs in another div inside the #container and give that "in-between-div" a fixed - calculated - width using javascript after loading the page.
如果您不想使用表,您还可以将所有.block div放在#container中的另一个div中,并在加载页面后使用javascript将“in-between-div”赋予固定计算的宽度。
Of course if you already know how many .blocks you have / if the number is fixed, you can give the "in-between-div" a fixed width using css.
当然,如果你已经知道你有多少.blocks /如果数字是固定的,你可以使用css给“in-between-div”一个固定的宽度。
#6
0
It sounds like you are doing gallery with div's?
这听起来像你在做div的画廊?
What exactly are you using the divs for?
你究竟用什么div?
It may be easier to use a ul/li with spans inside of the li to get the same effect without all the headaches of floating divs.
在li内部使用带有跨距的ul / li可能更容易获得相同的效果而没有浮动div的所有头痛。
#7
0
Use:
使用:
div#container {
overflow: auto;
}
Or add a clearing div below the three divs with the style:
或者使用样式在三个div下面添加一个清除div:
{
clear: both
}
#8
0
Put the divs you want to scroll in a table like so:
将要滚动的div放在表格中,如下所示:
<div style='width:1000;border:2 solid red;overflow-x:auto'>
<table><tr>
<td><div style='width:300;height:200;border:1 solid black'>Cell 1 </div></td>
<td><div style='width:300;height:200;border:1 solid black'>Cell 2 </div></td>
<td><div style='width:300;height:200;border:1 solid black'>Cell 3 </div></td>
<td><div style='width:300;height:200;border:1 solid black'>Cell 4 </div></td>
<td><div style='width:300;height:200;border:1 solid black'>Cell 5 </div></td>
</tr></table>
</div>
Edit: I tried 3 of these suggested solutions - they all work fine in Google Chrome - but the first one (container1) doesn't work in IE (go figure) - so the SPAN solution gets my vote :-) :
编辑:我尝试了其中3个建议的解决方案 - 它们在谷歌浏览器中都运行良好 - 但第一个(容器1)在IE中不起作用(如图) - 所以SPAN解决方案得到我的投票:-):
<html>
<body>
<style>
div#container1
{
height: 275px;
width: 100%;
overflow: auto;
white-space: nowrap;
border:2 solid red;
}
div#container1 div.block
{
width: 300px;
height: 200px;
display: inline-block;
border: 1 solid black;
}
div#container2
{
height: 275px;
width: 100%;
overflow: auto;
white-space: nowrap;
border:2 solid red;
}
div#container2 span.block
{
width: 300px;
height: 200px;
display: inline-block;
border: 1 solid black;
}
div#container3
{
height: 275px;
width: 100%;
overflow: auto;
white-space: nowrap;
border:2 solid red;
}
div#container3 div.block
{
width: 300px;
height: 200px;
display: inline-block;
border: 1 solid black;
}
</style>
<p>
<div id='container1'>
<div class='block'>Cell 1 </div>
<div class='block'>Cell 2 </div>
<div class='block'>Cell 3 </div>
<div class='block'>Cell 4 </div>
<div class='block'>Cell 5 </div>
</div>
<p>
<div id='container2'>
<span class='block'>Cell 1 </span>
<span class='block'>Cell 2 </span>
<span class='block'>Cell 3 </span>
<span class='block'>Cell 4 </span>
<span class='block'>Cell 5 </span>
</div>
<p>
<div id='container3'>
<table><tr>
<td><div class='block'>Cell 1 </div></td>
<td><div class='block'>Cell 2 </div></td>
<td><div class='block'>Cell 3 </div></td>
<td><div class='block'>Cell 4 </div></td>
<td><div class='block'>Cell 5 </div></td>
</tr></table>
</div>
</body>
</html>
Edit 2:
编辑2:
I ran this test page through browsershots.org, to see how different browsers handle it. Conclusion: Browser compatibility sucks. :-)
我通过browsershots.org运行了这个测试页面,看看不同的浏览器如何处理它。结论:浏览器兼容性很糟糕。 :-)
http://browsershots.org/http://dot-dash-dot.com/files/test_div2.htm
http://browsershots.org/http://dot-dash-dot.com/files/test_div2.htm
The table solution worked more often - but the span option (which is cleaner) only broke on browsers I've never heard of. :-)
表解决方案更常用 - 但是span选项(更干净)只能在我从未听说过的浏览器上打破。 :-)
#9
0
My Ex:
我的前夫:
div width: 850px gridview templatedcolumn ItemTemplate
div width:850px gridview templatedcolumn ItemTemplate
<span class="buttonspanlt"></span><asp:Button ID="imgEditSave" runat="server" Text="Edit SubStatus" CssClass="buttoncenter" OnClick="imgEditSave_OnClick"/><span class="buttonspanrt"></span>
<span style="display:none;float:left;clear:left;" id="spangrdCancel" runat="server"><span class="buttonspanlt"></span><asp:Button ID="imgCancel" runat="server" Text="Cancel" class="buttoncenter"/><span class="buttonspanrt"></span></span>
end ItemTemplate end templatedcolumn end gridview end div
结束ItemTemplate结束templatedcolumn结束gridview结束div
the button has left middle(actual button) right spans which where not floating as there was outer div with fixed width.
按钮左侧中间(实际按钮)右侧跨度,其中没有浮动,因为外部div具有固定宽度。
I had to use additional div with width 140px outside the button , inside the itemtemplate then it worked.
我不得不在按钮外面使用宽度为140px的额外div,在itemtemplate内部然后它工作。
Hope this helps!!!
希望这可以帮助!!!
Thank You Harish
谢谢哈里什