1

对于我们网站的主页，我们有一个主要的介绍内容区域和一个右侧边栏。

当主要内容超出侧边栏的高度（其本身基于内容扩展）时，我希望主要内容文本“环绕”右侧边栏。

下面是我用来完成此操作的 css 和标记（我提前为Lorum ipsum道歉，我用它来展示主要内容文本如何“环绕”右侧边栏）：

#container { width:100%; position:relative; padding:0; }
#maintext {}
#sidebar { float:right; width:200px }

<div id="container">

    <div id="sidebar">
      <ul>
      <li>Secondary</li>
      <li>Secondary</li>
      <li>Secondary</li>
      </ul>
    </div>

    <div id="maintext">
      <p>More important intro text appearing AFTER sidebar in HTML flow: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas  bibendum pharetra est eu aliquet. In lacinia est non augue egestas, nec  sodales felis euismod. Curabitur lacus enim, egestas quis pharetra non,  molestie ut nisi.</p>
      <p>Cras eleifend, ante non elementum rhoncus, odio metus  dapibus quam, eget aliquam risus odio et lorem. Suspendisse euismod urna  cursus ligula commodo ultrices. Integer vulputate ante eu lectus  consequat mattis. Donec tristique massa at lectus viverra congue.  Maecenas elementum justo vel pretium pulvinar. Phasellus at tortor  metus. Quisque at ligula metus. Nulla euismod ipsum sit amet ullamcorper  sollicitudin. Sed accumsan libero vitae magna fermentum aliquam. Nunc  nec nisi diam. Morbi iaculis bibendum rhoncus. Pellentesque sagittis  bibendum felis in gravida.</p>
    </div>  

</div>

上面的小提琴：http: //jsfiddle.net/Ezbd9/1/

这个标记的问题是侧边栏出现在主要内容之前。我尝试移动#sidebardiv 以使其跟随#maintextdiv，但结果是侧边栏仅出现在主要内容下方，自行浮动到右侧。如此处所示：http: //jsfiddle.net/Fct8F/1/

最初我并不担心这一点，但考虑到 SEO 以及我对我的网站的新响应式设计，我试图找到一种方法来获得相同的文本换行效果，但在适当的流程中（即主要内容后跟边栏）。

简而言之，我希望获得与上述代码相同的视觉结果，但在 HTML 中的#maintextdiv 之前使用#sidebardiv。

4

0 回答 0