我正在尝试为我的网站创建一个水平的、可滚动的布局。我的代码看起来像这样
<div id="outerWrapper">
<div id="innerWrapper" style="position: relative;">
<div style="width: 200px; position: absolute; top: 0px; left: 0px;">
some lengthy content!
</div>
<div style="width: 200px; position: absolute; top: 0px; left: 220px;">
some lengthy content!
</div>
<div style="width: 200px; position: absolute; top: 0px; left: 440px;">
some lengthy content!
</div>
...
<div style="width: 200px; position: absolute; top: 0; left: 1100px;">
some lengthy content!
</div>
</div>
</div>
我现在正尝试为整个内容添加 margin-right,因此我尝试为 innerWrapper 和/或 outerWrapper 添加 margin-right,但它被忽略了。左边距正在工作。我实际上使用了 position: absolute
方法而不是 float: left
来避免这些问题,但似乎它不起作用。任何想法为什么我不能保证内容正确?即使我在内部或外部包装器上明确设置宽度,它仍然无法正常工作。
有趣的是,正文的宽度不正确 - 正文的宽度是浏览器窗口的宽度,而不是包装器的宽度。
应该说内容(innerWrapper 和下面的所有内容)是通过 JS 动态创建的,如果这很重要的话。
最佳答案
如果你想要水平。布局,首先设置 outerWrapper
的高度。
然后使用列表元素在“页面”中设置您的内容:
<div id="outerWrapper">
<ul id="maincontent">
<li ><a name="p1">Box 1</a></li>
<li ><a name="p2">Box 2</a></li>
<li ><a name="p3">Box 3</a></li>
<li ><a name="p4">Box 4</a></li>
<li ><a name="p5">Box n</a></li>
</ul>
</div>
现在对于导航系统,您可以:
<div id="scroll-buttons">
<a href="#p1">Go to the section 1</a> |
<a href="#p2">Go to the section 2</a> |
<a href="#p3">Go to the section 3</a> |
<a href="#p4">Go to the section 4</a>
</div>
CSS:
#container{
width:3000px;
height:400px;
}
#maincontent{
border:0;
margin:0;
padding:0;
}
#maincontent li{
line-style:none;
width:240px;
height:380px;
padding:10px;
float:left;
}
#scroll-buttons{position:fixed;}
关于您的“为什么”问题:请注意 absolutely positioned elements exit the DOM structure tree . (顺便说一句,float:
也是这样做的)。
关于javascript - margin-right 水平 div 布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19464195/