1

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

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

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

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

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

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

<!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>}

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

4

1 回答 1

0

使用 jQuery 你可以这样做：

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

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

于 2014-07-28T03:50:36.137 回答