Question

相当简单的问题，但尝试了一切。

我想要的是2个（实际上是5个）与“容器”类相互旁边的div，所以我可以创建一个水平的1page网站。每个div必须是100％宽。所以2个div意味着彼此相邻的2个屏幕。

这是我现在拥有的css专线：

.container { width: 100%; float: left; display: inline; }

我不能让他们排成一列。

这是一个让它更清晰的视觉效果。 enter image description here 用于更大预览的图片网址：http://www.luukratief.com/stackoverflow.png

滚动部分对我来说不是问题，只是div的放置。

这可能是使用百分比还是这是不可能的。如果是这样，请告诉我如何使用css。

提前致谢！

Answer 1

您可以制作宽度为200％的容器，然后在该元素内放置两个div，宽度为50％，这样您就可以确保一个div始终获得整个访问者的屏幕宽度。

例如：

<div class="container">
    <div class="contentContainer"></div>
    <div class="contentContainer"></div>
</div>

和CSS：

.container {
    width: 200%;
}

.contentContainer {
    width: 50%;
    float: left;
}

Answer 2

这对你来说如何？

http://jsfiddle.net/2wrzn/19/

请注意，边框不是必需的。我正在用它进行测试。打开它也会使其中一个div环绕，所以它关闭了。

Answer 3

你应该使用display: inline-block;而不是float anf然后将所有五个div包装在另一个容器中，或者使用body元素并添加white-space: nowrap。

如果设计具有令人难以置信的像素完美度，则可以通过删除HTML中的空白或者给它们约0.25em的负右边距来删除内联块之间的实际“字间距”;但如果滚动到新的“页面”，你还是不会注意到它..

Example Fiddle

HTML代码：

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

Answer 4

如果你想让它们彼此相邻，那么它们就不可能是100％。 width：100％将强制div占据其包含元素的整个宽度，在这种情况下，我想是窗口的整个宽度。

如果您希望两个屏幕彼此相邻，则需要将每个屏幕的宽度设置为50％。如果我误解了你的问题，请添加更多细节。

Answer 5

您可以尝试这样的方法，但是您可能会遇到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>

Answer 6

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>

2 divs 100％彼此相邻

6 个答案:

Example Fiddle