Question

我需要将此#wrapper <div>置于页面上无边栏的区域。使用这些选项，它以整个<body>为中心，并在侧边栏后面。

#wrapper /* Centers #posts <div>, but at the same time it makes #posts <div> go behind the sidebar, which I don't want to. */ {
    width: 800px;
} 
#posts {
    width: 800px;
    float: left; /* Is needed for the Masonry script. */
}
.entry /* Sets options for each post in two columns in #posts <div>. */ {
    width: 400px; /* Musthave option too. */
}
#sidebar {
    position: fixed;
    top: 0px;
    right: 0px;
    width: 250px;
    height: 100%;
    display: table; /* Is needed for centering stuff inside of the sidebar. */
}

<body>
    <div id='wrapper'> <!-- This one is supposed to be centered in the sidebar-free area on the page. -->
        <div id='posts'>
            <!-- Here are all of the posts. -->
                <div class='entry'>
                </div>
        </div>
    </div>
    <div id='sidebar'>
    </div>
</body>

现在的样子：

我的样子是什么：

Answer 1

附加CSS

#main-content {
    position: absolute;
    top: 0;
    left: 250px;
    right: 250px;
    bottom: 0;
}

#wrapper {
    width: 800px;
    margin: 0 auto;
}

主要HTML

<body>
    <div id='main-content'>
        <div id='wrapper'> <!-- This one is supposed to be centered in the sidebar-free area on the page. -->
            <div id='posts'>
                <!-- Here are all of the posts. -->
                    <div class='entry'>
                    </div>
            </div>
        </div>
    </div>
    <div id='sidebar'>
    </div>
</body>

Answer 2

这里是http://fiddle.jshell.net/p05drxpk/1/

首先，我将身体设置为：

body{
    width: 100%;
    margin: 0;
    padding: 0;
}

我还设置百分比而不是像素并设置框大小，因此填充不会扩展元素以使其不适合。

Answer 3

您可以在主体上添加一些填充以补偿侧边栏宽度。如果添加与侧边栏宽度相同数量的填充，则整个主体将被推向左侧。请参阅代码段。

如果您不必支持，也可以使用flex-box来实现此目的

＆＃13;

/* New =================================================================== */

body {
    /* Push content of the body to the left. Use same amount as the sidebar width */
    padding-right: 250px;
    /* Remove default margin */
    margin: 0;
}

#wrapper {        
    /* Centers the wrapper */
    margin: 0 auto;
}

/* Old =================================================================== */

#wrapper /* Centers #posts <div>, but at the same time it makes #posts <div> go behind the sidebar, which I don't want to. */ {
    width: 800px;
} 
#posts {
    width: 800px;
    float: left; /* Is needed for the Masonry script. */
}
.entry /* Sets options for each post in two columns in #posts <div>. */ {
    width: 400px; /* Musthave option too. */
}
#sidebar {
    position: fixed;
    top: 0px;
    right: 0px;
    width: 250px;
    height: 100%;
    display: table; /* Is needed for centering stuff inside of the sidebar. */
}

/* Demo ============================================================= */

#wrapper {
    /* So you can see it in the demo */
    height: 80px;
    background: red;
}

#sidebar {
    /* So you can see it in the demo */
    height: 80px;
    background: blue;
}

＆＃13;

<body>
    <div id='wrapper'> <!-- This one is supposed to be centered in the sidebar-free area on the page. -->
        <div id='posts'>
            <!-- Here are all of the posts. -->
                <div class='entry'>
                </div>
        </div>
    </div>
    <div id='sidebar'>
    </div>
</body>

＆＃13;

Answer 4

我想我明白了，试试这个：

#wrapper /* Centers #posts <div>, but at the same time it makes #posts <div> go behind the sidebar, which I don't want to. */ {
  width: calc(100% - 250px);
  height: 500px;
  background-color: purple;
} 
#posts {
  margin-right: calc(50% - 400px);
  width: 800px;
  background-color: blue;
  height: 500px;
  float: right; /* Is needed for the Masonry script. */
}
.entry /* Sets options for each post in two columns in #posts <div>. */ {
  width: 400px; /* Musthave option too. */
}
#sidebar {
  position: fixed; 
  background-color: red;
  top: 0px;
  right: 0px;
  width: 250px;
  height: 100%;
  display: table; /* Is needed for centering stuff inside of the sidebar. */
}

我使用了calc（）函数来获取中间的帖子ID。 calc（）函数中使用的公式基本上是全宽 - 这个类为（post id）创建的元素的一半，而对于包装id，它是calc（全宽 - 侧边栏id全宽）。 / p>

在无侧边栏区域中居<div>

4 个答案: