Quite simple question but tried about everything.
相当简单的问题,但尝试了一切。
what i want is 2 (actually 5) divs next to eachother with the class "container" so i can make a horizontal 1page website. Each div has to be 100% wide. so 2 divs mean 2 screens next to eachother.
我想要的是2(实际上是5)divs旁边的另一个类“容器”所以我可以做一个水平的1page网站。每个div必须是100%宽。所以2个div意味着彼此相邻的2个屏幕。
This is the css line i have now:
这是我现在的css线:
.container { width: 100%; float: left; display: inline; }
I cant get them to line up next to each other.
我不能让他们排成一列。
Here is a visual to make it more clear. 
这是一个让它更清晰的视觉效果。 image url进行更大预览:http://www.luukratief.com/*.png
The scrolling part is not the issue for me, just the placement of the divs.
滚动部分对我来说不是问题,只是div的位置。
Is this possible using percentages or is this simply not possible. If so, please tell me how to do this with css.
这可能是使用百分比还是这是不可能的。如果是这样,请告诉我如何用css做到这一点。
Thanks in advance!
提前致谢!
6 个解决方案
#1
12
You can make a container with 200% width and then put two divs inside of that element with 50% width so you will make sure that one div always gets the whole visitors screen width.
您可以制作宽度为200%的容器,然后在该元素内放置两个div,宽度为50%,这样您就可以确保一个div总是获得整个访问者的屏幕宽度。
For example:
<div class="container">
<div class="contentContainer"></div>
<div class="contentContainer"></div>
</div>
And CSS:
.container {
width: 200%;
}
.contentContainer {
width: 50%;
float: left;
}
#2
4
How does this look to you?
这看起来怎么样?
Note that the border isn't required. I was using it for testing. Turning it on also makes one of the divs wrap around, so it's turned off.
请注意,边框不是必需的。我用它来测试。打开它也会使其中一个div环绕,所以它被关闭了。
#3
3
you should use display: inline-block; instead of float anf then wrap all five divs in another container or use the body element and add white-space: nowrap to it.
你应该使用display:inline-block;而不是浮动anf然后将所有五个div包装在另一个容器中或使用body元素并添加white-space:nowrap。
If the design is incredibly pixel perfect, you can remove the actual "word-spacing" between the inline-blocks by removing the whitespace in the HTML or by giving them a negative right margin of about 0.25em; but if scrolling to new "page" you dn't notice it anyway..
如果设计具有令人难以置信的像素完美,您可以通过删除HTML中的空格或通过给它们约0.25em的负右边距来删除内联块之间的实际“字间距”;但是如果滚动到新的“页面”你还是没注意到它..
Example Fiddle
HTML Code:
<div class="container" id="p1">Page 1 => <a href="#p2">Next page</a></div>
<div class="container" id="p2">Page 2 => <a href="#p3">Next page</a></div>
<div class="container" id="p3">Page 3 => <a href="#p4">Next page</a></div>
<div class="container" id="p4">Page 4 => <a href="#p5">Next page</a></div>
<div class="container" id="p5">Page 5 => <a href="#p1">Next page</a></div>
CSS:
html, body {margin: 0; padding: 0; height: 100%;}
body {white-space: nowrap;}
.container {
display: inline-block;
width: 100%;
height: 100%;
}
.container {
display: inline !ie7; /* for working inline-blocks in IE7 and below */
}
.container * {white-space: normal;}
#p1 {background: #fcf;}
#p2 {background: #ff0;}
#p3 {background: #cfc;}
#p4 {background: #abc;}
#p5 {background: #cba;}
#4
1
If you want them next to each other then they can't be 100%. width: 100% will force the div to take up the full width of it's containing element, in this case the full width of the window I guess.
如果你想让它们彼此相邻,那么它们就不可能是100%。 width:100%将强制div占据其包含元素的整个宽度,在这种情况下,我猜测窗口的整个宽度。
If you want two screens next to each other you'd need to set the width of each to 50%. If I've misunderstood you're question add a bit more detail.
如果您希望两个屏幕彼此相邻,则需要将每个屏幕的宽度设置为50%。如果我误解了你的问题,请添加更多细节。
#5
0
You could try something like this, but you may have compatibility problems with IE and table* (but you can consider http://code.google.com/p/ie7-js/ to fix that)
你可以试试这样的东西,但你可能会遇到IE和桌面*的兼容性问题(但你可以考虑http://code.google.com/p/ie7-js/来解决这个问题)
<!DOCTYPE html>
<html>
<head>
<style>
html { width: 500%; display: table; }
body { width: 100%; display: table-row; overflow-x: scroll}
.container { width: 20%; display: table-cell; }
</style>
<body>
<div class="container">Test1</div>
<div class="container">Test2</div>
<div class="container">Test3</div>
<div class="container">Test4</div>
<div class="container">Test5</div>
#6
0
The % width of the divs is a percentage of the width of the tags they are contained in and ultimately the body tag (i.e. not the window). So the body tag must be 100 * n where n is the number of div tags you want side-by-side. The example below has 2 div tags thus the body is 200% (2 * 100). Each the div tag's; width is a percentage of the body tag's width roughly 100 / n (need a smidgen less). Don't forget to factor in margin and padding. Here's an example:
div的%宽度是它们包含的标签宽度的百分比,最终是身体标签(即不是窗口)。所以body标签必须是100 * n,其中n是你想要并排的div标签的数量。下面的示例有2个div标签,因此正文为200%(2 * 100)。每个div标签的; width是body标签宽度的百分比,大约为100 / n(需要较少的smidgen)。不要忘记考虑边距和填充。这是一个例子:
<html>
<head>
<style type="text/css">
body{
width:200%;
margin:0%;
padding:0%;
}
#dvScreen1, #dvScreen2{
width:49.95%;
height:80%;
clear:none;
}
#dvScreen1 {
float:left;
border:solid black 1px
}
#dvScreen2{
float:right;
border:solid blue 1px
}
</style>
</head>
<body>
<div id="dvScreen1">
<p>Screen 1 stuff ...</p>
</div>
<div id="dvScreen2">
<p>Screen 2 stuff ...</p>
</div>
</body>
</html>
#1
12
You can make a container with 200% width and then put two divs inside of that element with 50% width so you will make sure that one div always gets the whole visitors screen width.
您可以制作宽度为200%的容器,然后在该元素内放置两个div,宽度为50%,这样您就可以确保一个div总是获得整个访问者的屏幕宽度。
For example:
<div class="container">
<div class="contentContainer"></div>
<div class="contentContainer"></div>
</div>
And CSS:
.container {
width: 200%;
}
.contentContainer {
width: 50%;
float: left;
}
#2
4
How does this look to you?
这看起来怎么样?
Note that the border isn't required. I was using it for testing. Turning it on also makes one of the divs wrap around, so it's turned off.
请注意,边框不是必需的。我用它来测试。打开它也会使其中一个div环绕,所以它被关闭了。
#3
3
you should use display: inline-block; instead of float anf then wrap all five divs in another container or use the body element and add white-space: nowrap to it.
你应该使用display:inline-block;而不是浮动anf然后将所有五个div包装在另一个容器中或使用body元素并添加white-space:nowrap。
If the design is incredibly pixel perfect, you can remove the actual "word-spacing" between the inline-blocks by removing the whitespace in the HTML or by giving them a negative right margin of about 0.25em; but if scrolling to new "page" you dn't notice it anyway..
如果设计具有令人难以置信的像素完美,您可以通过删除HTML中的空格或通过给它们约0.25em的负右边距来删除内联块之间的实际“字间距”;但是如果滚动到新的“页面”你还是没注意到它..
Example Fiddle
HTML Code:
<div class="container" id="p1">Page 1 => <a href="#p2">Next page</a></div>
<div class="container" id="p2">Page 2 => <a href="#p3">Next page</a></div>
<div class="container" id="p3">Page 3 => <a href="#p4">Next page</a></div>
<div class="container" id="p4">Page 4 => <a href="#p5">Next page</a></div>
<div class="container" id="p5">Page 5 => <a href="#p1">Next page</a></div>
CSS:
html, body {margin: 0; padding: 0; height: 100%;}
body {white-space: nowrap;}
.container {
display: inline-block;
width: 100%;
height: 100%;
}
.container {
display: inline !ie7; /* for working inline-blocks in IE7 and below */
}
.container * {white-space: normal;}
#p1 {background: #fcf;}
#p2 {background: #ff0;}
#p3 {background: #cfc;}
#p4 {background: #abc;}
#p5 {background: #cba;}
#4
1
If you want them next to each other then they can't be 100%. width: 100% will force the div to take up the full width of it's containing element, in this case the full width of the window I guess.
如果你想让它们彼此相邻,那么它们就不可能是100%。 width:100%将强制div占据其包含元素的整个宽度,在这种情况下,我猜测窗口的整个宽度。
If you want two screens next to each other you'd need to set the width of each to 50%. If I've misunderstood you're question add a bit more detail.
如果您希望两个屏幕彼此相邻,则需要将每个屏幕的宽度设置为50%。如果我误解了你的问题,请添加更多细节。
#5
0
You could try something like this, but you may have compatibility problems with IE and table* (but you can consider http://code.google.com/p/ie7-js/ to fix that)
你可以试试这样的东西,但你可能会遇到IE和桌面*的兼容性问题(但你可以考虑http://code.google.com/p/ie7-js/来解决这个问题)
<!DOCTYPE html>
<html>
<head>
<style>
html { width: 500%; display: table; }
body { width: 100%; display: table-row; overflow-x: scroll}
.container { width: 20%; display: table-cell; }
</style>
<body>
<div class="container">Test1</div>
<div class="container">Test2</div>
<div class="container">Test3</div>
<div class="container">Test4</div>
<div class="container">Test5</div>
#6
0
The % width of the divs is a percentage of the width of the tags they are contained in and ultimately the body tag (i.e. not the window). So the body tag must be 100 * n where n is the number of div tags you want side-by-side. The example below has 2 div tags thus the body is 200% (2 * 100). Each the div tag's; width is a percentage of the body tag's width roughly 100 / n (need a smidgen less). Don't forget to factor in margin and padding. Here's an example:
div的%宽度是它们包含的标签宽度的百分比,最终是身体标签(即不是窗口)。所以body标签必须是100 * n,其中n是你想要并排的div标签的数量。下面的示例有2个div标签,因此正文为200%(2 * 100)。每个div标签的; width是body标签宽度的百分比,大约为100 / n(需要较少的smidgen)。不要忘记考虑边距和填充。这是一个例子:
<html>
<head>
<style type="text/css">
body{
width:200%;
margin:0%;
padding:0%;
}
#dvScreen1, #dvScreen2{
width:49.95%;
height:80%;
clear:none;
}
#dvScreen1 {
float:left;
border:solid black 1px
}
#dvScreen2{
float:right;
border:solid blue 1px
}
</style>
</head>
<body>
<div id="dvScreen1">
<p>Screen 1 stuff ...</p>
</div>
<div id="dvScreen2">
<p>Screen 2 stuff ...</p>
</div>
</body>
</html>