Question

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

目前，该网站左侧有主要内容，在RHS上有一个全高的侧边栏。

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

如果我控制了HTML源代码，我会先在侧边栏中放置“float：right”，但我无法控制源代码，侧边栏div位于主要内容之后。< / p>

传统上这不能在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>}

如果侧栏位于内容之上，我会获得所需的格式

Answer 1

使用jQuery，你可以这样做：

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

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

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

1 个答案: