Question

当左侧边栏比内容短时，如何将主内容div放在中间而不会向左折叠？那可能吗？我不想使用固定的高度进行导航，但我可以用某种方式说“sidebarleft height = content height”，还是有更简单的方法？

谢谢！

Answer 1

我不太确定这是不是你的意思，但请尝试：

 #node-29{
    float: right;
    clear: left;
    margin-left: 0;
 }

这会将div放在彼此旁边，并将主要内容保持在右侧。

Answer 2

根据您现有的主题，这可能非常复杂。

我前一段时间写了这个页面，告诉你如何做到这一点。

http://linux.m2osw.com/3columns

或多或少，你需要一个包含左栏和内容的第一个div。那个div是那个集中的。

为了简单起见，你可以为div设置一个特定的宽度，你得到这样的东西：

div.page
{
  width: 900px;
  margin: 0 auto;
}

这将使主要的div居中。

对于列和内容，两者都是float: left; div。为了“关闭”该批次，您需要在关闭主div之前使用另一个div。那个风格确保主div具有正确的大小：clear: both;。

Answer 3

我们可以使用边距来设置div位置。我们可以指定固定边距，也可以给出百分比值，以便它基于屏幕的总大小。

<!DOCTYPE html>
    <html>
    <head>
    <style>
    #main
    {
    background-color:yellow;
    }
    #main
    {
    margin-top:100px;
    margin-bottom:100px;
    margin-right:50px;
    margin-left:50px;
    }
    </style>
    </head>

    <body >
    <div id="main">
    this is how we can display main div in centre
    </div>
    </body>

    </html>

enter image description here

将div放在另一个旁边 - 2列布局

3 个答案: