如何重新设计网站以围绕侧边栏流动内容？答案

【问题标题】：How to restyle website to flow content around sidebar?如何重新设计网站以围绕侧边栏流动内容？
【发布时间】：2014-07-22 21:37:01
【问题描述】：

我正在尝试编写用户样式来重新格式化另一个网站（没有机会更改 html）。

目前该网站的主要内容位于左侧，右侧是全高侧边栏。

我使用 CSS 删除了大部分侧边栏内容，现在希望扩展主要内容以填充侧边栏下方区域的宽度。

如果我可以控制 HTML 源代码，我会先将侧边栏放在样式中的“float: right”，但我无法控制源代码，而侧边栏 div 位于主要内容之后。

传统上这不能在 CSS 中完成，但现在可以使用 CSS3 完成吗？如果是的话怎么办？

我实际尝试设置样式的页面是 TripAdvisor 论坛页面，例如 this one，但尝试将它们用作示例过于复杂，因此我创建了这个非常简单的网页来玩：

<!DOCTYPE html>
<html>

<head>
  <style>
    #mainbody {
      border: 2px solid blue;
      width: 600px;
    }
    
    #sidebar {
      border: 2px solid green;
      position: inherit;
      float: right;
      width: 250px;
    }
    
    #content {
      position: inherit;
      width: 550px;
    }
  </style>
</head>

<body>
  <div id=mainbody>

    <div id=content>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
        porta. Mauris massa. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
        porta. Mauris massa. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
        porta. Mauris massa.</p>
    </div>

    <div id=sidebar>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
        porta. Mauris massa. </p>
    </div>
  </div>

</body>

</html>}

通过内容上方的侧边栏，我得到了所需的格式

【问题讨论】：

这取决于网站。
是的。可以办到。它很老套而且一团糟，但你可以重新设计主要内容来做几乎任何事情。给出具体的步骤和CSS规则，我们需要看代码。否则，这都是关于 z-index、宽度和绝对定位的假设讨论。

标签： css sidebar userstyles

【解决方案1】：

使用 jQuery 你可以做到这一点：

$("#content").insertAfter("#sidebar");

http://jsbin.com/juvoc/1/edit

【讨论】：

可以从CSS调用jQuery吗？我无权访问 HTML 源代码！
你不需要访问html源代码，但你不能从CSS调用jQuery，你只需使用现有的外部脚本并添加它，如果是纯javascript，我不知道。那将是一个标记为 javascript 的新问题。
我也无法访问脚本 - 我正在尝试使用 CSS 重新设置我无法控制的网站