Question

我的网站有右侧边栏和左侧主要内容区域。代码如下所示：

<div class="leftside">leftsidecontent</div>
<div class="leftside">leftsidecontent</div>
<div class="leftside">leftsidecontent</div>
<div class="leftside">leftsidecontent</div>
<div class="rightside">rightsidecontent</div>
<div class="rightside">rightsidecontent</div>
<div class="rightside">rightsidecontent</div>

带

.leftside
{
  float:left;
  width:710px;
}
.rightside
{
  margin-left:720px;
}

（参见http://blog.stephenkiers.com/的实际网站）

以这种方式编码的原因是因为左侧内容很重要，我希望成为视觉障碍访客访问的第一个数据;而不是他们每次都不得不跳过所有的毛茸茸！

代码适用于FF，IE8，Safari等;但是在IE7中，右边的div清除浮动的div。

我很乐意为您提供任何建议。我对如何修复它有一些想法;但它们都涉及相当大的重写。

谢谢！

Answer 1

为什么不尝试将内容包装成两列，如example

CSS：

.leftside {
  float:left;
  width:710px;
}

.rightside {
  float: left;
  margin-left: 20px;
}

.contentBlock { margin-bottom: 10px; background: #ccc; padding: 8px; }

HTML：

<div class="leftside">
  <div class="contentBlock">
    <p>main stuff goes here</p>
  </div>
  <div class="contentBlock">
    <p>main stuff goes here</p>
  </div>
  <div class="contentBlock">
    <p>main stuff goes here</p>
  </div>
  <div class="contentBlock">
    <p>main stuff goes here</p>
  </div>
</div>
<div class="rightside">
  <div class="contentBlock">
    <p>secondary stuff goes here</p>
  </div>
  <div class="contentBlock">
    <p>secondary stuff goes here</p>
  </div>
  <div class="contentBlock">
    <p>secondary stuff goes here</p>
  </div>
  <div class="contentBlock">
    <p>secondary stuff goes here</p>
  </div>
</div>

这样，左侧和右侧只是布局元素，与内容隔离。

视障用户的另一个好建议是在页面顶部设置链接，以允许用户直接跳到内容部分并使用css将其隐藏在布局中：

.skipToLinks { position: absolute; top: -100px;}

IE7 / IE8兼容渲染浮动布局错误

1 个答案: