如何使用<div>标记实现一个3-column 网站的最佳方法？
如何使用<div>标记实现一个3-column 网站的最佳方法？
提问于 2017-12-26 09:37:30
我正在开发一个3列网站，使用的布局如下：
<div id='left' style='left: 0; width: 150px; '> ... </div>
<div id='middle' style='left: 150px; right: 200px' > ... </div>
<div id='right' style='right: 0; width: 200px; '> ... </div>但是，考虑到默认CSS的“位置”属性<DIV>'s是静态的，我的<DIV>'s如预期的那样显示在另一个下面。
So I set the CSS property 'position' to 'relative', and changed the 'top' property of the 'middle' and 'right' <DIV>'s到-(减去)前面的高度。<DIV>它很好，但这种方法给我带来了两个问题：
1)尽管InternetExplorer 7正确显示了三列，但它仍然保持垂直滚动条，就像<DIV>'s在内容结束后有大量的空白。我不想要这个。
2)这些元素的高度是可变的，所以我不知道为每个元素设置哪个值<DIV>“顶级”财产；我不想硬编码它。
所以我的问题是，实现这个布局的最好方法是什么(简单+优雅)？我想避免绝对定位，我也要保持我的设计表格。
回答 3
Stack Overflow用户
发布于 2017-12-26 16:48:35
Stack Overflow用户
发布于 2017-12-26 18:36:30
到目前为止，我找到的最简单的方法是执行3列(或以奇怪的方式在可用空间上拆分的任何其他列数)YUI网格.有一个YUI网格生成器给你基本的布局。下面将给您一个750 px宽的基本3列布局(拆分1/3 1/3/3)和一个160 px左侧边栏。将其更改为其他宽度、侧栏信任和列拆分非常容易。
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3 <html>
4 <head>
5 <title>YUI Base Page</title>
6 <link rel="stylesheet" href="http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
7 </head>
8 <body>
9 <div id="doc" class="yui-t1">
10 <div id="hd"><h1>YUI: CSS Grid Builder</h1></div>
11 <div id="bd">
12 <div id="yui-main">
13 <div class="yui-b"> <div class="yui-gb">
14 <div class="yui-u first">
15 <!-- YOUR DATA GOES HERE -->
16 </div>
17 <div class="yui-u">
18 <!-- YOUR DATA GOES HERE -->
19 </div>
20 <div class="yui-u">
21 <!-- YOUR DATA GOES HERE -->
22 </div>
23 </div>
24 </div>
25 </div>
26 <div class="yui-b"><!-- YOUR NAVIGATION GOES HERE --></div>
27
28 </div>
29 <div id="ft">Footer is here.</div>
30 </div>
31 </body>
32 </html> Stack Overflow用户
发布于 2017-12-26 19:33:34
试着把div放在左边，这会让它们保持在同一条线上--假设有足够的间距。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100000009
复制相关文章
相似问题