Javascript 对中<；部门>；在一个没有边栏的区域_Javascript_Html_Css

Javascript 对中<；部门>；在一个没有边栏的区域

javascript html css

Javascript 对中<；部门>；在一个没有边栏的区域,javascript,html,css,Javascript,Html,Css,我需要将这个#包装器放在页面的侧边栏空白区域的中心。使用这些选项，它将以整个为中心，并位于侧边栏后面 #wrapper/*Centers#posts，但同时它使#posts位于侧边栏后面，我不想这样做。*/{ 宽度：800px； } #职位{ 宽度：800px； float:left；/*是砌体脚本所必需的*/ } .entry/*在#posts中的两列中为每个post设置选项。*/{ 宽度：400px；/*也必须有选项*/ } #边栏{ 位置：固定；顶部：0px；右：0px；宽度：25

我需要将这个

#包装器

放在页面的侧边栏空白区域的中心。使用这些选项，它将以整个

为中心，并位于侧边栏后面

#wrapper/*Centers#posts，但同时它使#posts位于侧边栏后面，我不想这样做。*/{
宽度：800px；
} 
#职位{
宽度：800px；
float:left；/*是砌体脚本所必需的*/
}
.entry/*在#posts中的两列中为每个post设置选项。*/{
宽度：400px；/*也必须有选项*/
}
#边栏{
位置：固定；
顶部：0px；
右：0px；
宽度：250px；
身高：100%；
显示：表格；/*用于将边栏内的内容居中*/
}

现在的样子：

我想它看起来像什么：

附加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>

附加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>

这里有一个

首先，我将主体设置为：

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

我还设置了百分比而不是像素，并设置了框大小，以便填充不会将元素扩展到不合适的位置

这里有一个

首先，我将主体设置为：

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

我还设置了百分比而不是像素，并设置了框大小，以便填充不会将元素扩展到不合适的位置

您可以在主体中添加一些填充，以补偿侧边栏的宽度。如果添加与侧边栏宽度相同的填充量，则整个身体将被推到左侧。请看片段

如果不需要支持，也可以使用来实现这一点新的*/ 身体{ /*将正文内容向左推。使用与侧边栏宽度相同的量*/ 右边填充：250px； /*删除默认保证金*/ 保证金：0； } #包装器{ /*使包装纸居中*/ 保证金：0自动； } /*旧的=========================================================================================================================*/ #包装器/*居中放置#帖子，但同时它使#帖子位于侧边栏后面，我不想这样做。*/{ 宽度：800px； } #职位{ 宽度：800px； float:left；/*是砌体脚本所必需的*/ } .entry/*在#posts中的两列中为每个post设置选项。*/{ 宽度：400px；/*也必须有选项*/ } #边栏{ 位置：固定；顶部：0px；右：0px；宽度：250px；身高：100%；显示：表格；/*用于将边栏内的内容居中*/ } /*演示=================================================================================================*/ #包装纸{ /*所以你可以在演示中看到它*/ 高度：80px；背景：红色； } #边栏{ /*所以你可以在演示中看到它*/ 高度：80px；背景：蓝色； }

您可以在正文中添加一些填充，以补偿边栏的宽度。如果添加与侧边栏宽度相同的填充量，则整个身体将被推到左侧。请看片段

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

#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. */
}

#wrapper/*Centers#posts，但同时它使#posts位于侧边栏后面，我不想这样做。*/{
宽度：钙（100%-250px）；
高度：500px；
背景颜色：紫色；
} 
#职位{
保证金权利：计算（50%-400px）；
宽度：800px；
背景颜色：蓝色；
高度：500px；
float:right；/*是砌体脚本所必需的*/
}
.entry/*在#posts中的两列中为每个post设置选项。*/{
宽度：400px；/*也必须有选项*/
}
#边栏{
位置：固定；
背景色：红色；
顶部：0px；
右：0px；
宽度：250px；
身高：100%；
显示：表格；/*用于将边栏内的内容居中*/
}

我使用Calc（）函数来获取中间的POST ID。calc（）函数中使用的公式基本上是全宽的-这个类创建的元素的一半（posts id），包装器id是calc（全宽-边栏id全宽）。

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

#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. */
}

#wrapper/*Centers#posts，但同时它使#posts位于侧边栏后面，我不想这样做。*/{
宽度：钙（100%-250px）；
高度：500px；
背景颜色：紫色；
} 
#职位{
文科硕士