使用css对中div，但不移动到边栏上我想在浏览器中间放置一个div，但我不希望居中的div越过我的侧栏（在红色边栏上）。_Css_Html_Center_Sidebar

使用css对中div，但不移动到边栏上我想在浏览器中间放置一个div，但我不希望居中的div越过我的侧栏（在红色边栏上）。

css html

使用css对中div，但不移动到边栏上我想在浏览器中间放置一个div，但我不希望居中的div越过我的侧栏（在红色边栏上）。,css,html,center,sidebar,Css,Html,Center,Sidebar,我对两个都使用绝对位置。我尝试了相对和浮动，但没有结果更新：很抱歉没有解释清楚，但我的问题是，如果我重新调整浏览器的大小，使其非常小，以中心为中心的内容就会覆盖在侧边栏上我希望居中的内容居中，但当浏览器宽度很小时，我不希望与侧边栏重叠代码如下： <body> <div id="sidebar"> sidebar stuff </div> <div id="distance"></div> <div id

我对两个

都使用绝对位置。我尝试了相对和浮动，但没有结果

更新：

很抱歉没有解释清楚，但我的问题是，如果我重新调整浏览器的大小，使其非常小，以中心为中心的内容就会覆盖在侧边栏上

我希望居中的内容居中，但当浏览器宽度很小时，我不希望与侧边栏重叠

代码如下：

<body>
    <div id="sidebar"> sidebar stuff </div>
   <div id="distance"></div>
   <div id="content">
      <!-- absolutely centered content -->
   </div>

</body>

<style type="text/css">
 html, body {
    height: 100%;         
}
body {
    text-align: center;   
    padding: 0;           
    margin: 0;          
}
#sidebar {
    position:absolute;
    top:0;
}
#distance { 
    margin-bottom: -10em; 
    background: red;     
    width: 1px;          
    height: 50%;          
    float: left;         

}
#content {
    position: relative;   
    text-align: left;     
    height: 20em;         
    width: 40em;          
    background: blue;     
    margin: 0 auto;       
    clear: left;         
}
  </style>


边栏的东西
html，正文{
身高：100%；
}
身体{
文本对齐：居中；
填充：0；
保证金：0；
}
#边栏{
位置：绝对位置；
排名：0；
}
#距离{
边缘底部：-10em；
背景：红色；
宽度：1px；
身高：50%；
浮动：左；
}
#内容{
位置：相对位置；
文本对齐：左对齐；
高度：20em；
宽度：40em；
背景：蓝色；
保证金：0自动；
清除：左；
}

我不知道你的确切意思，但试试我的。我认为你们需要的是，你们有一个具有一定宽度的边栏，你们想在考虑边栏的同时定位div

我使用了

display:inline块

，所以它在IE7中不起作用更新：Praveen Vijayan在下面的文章中提到添加

zoom:1

和

*display:inline

将修复IE7

很难从问题中准确找出您想要的内容，但下面是：


边栏的东西

html，正文{
身高：100%；
}
身体{
文本对齐：居中；
填充：0；
保证金：0；
}
#边栏{
位置：绝对位置；
排名：0；
右：-200px；
宽度：200px；
高度：200px；
背景：红色；
}
#内容{
位置：相对位置；
文本对齐：左对齐；
高度：20em；
宽度：40em；
背景：蓝色；
保证金：0自动；
}

无论侧边栏的宽度是多少，都要将正确的位置设置为相同数量的负数。

你的意思是，如果中间的div位于侧边栏后面，对你来说可以吗？我不理解OP的要求。但是。。为什么你提到你的代码在IE7中不起作用。我想会的。@Praaven因为我使用display:inline块，所以它不起作用。很抱歉没有很好地解释，但我的问题是，如果我调整浏览器的大小，使其非常小，以中心为中心的内容就会出现在侧边栏上。我希望居中的内容居中，但当浏览器宽度很小时，我不想与侧边栏重叠。没问题。好的，你查过我的答案了吗？似乎在按你的要求做-

<body>
   <div id="content">
       <!-- absolutely centered content -->
       <div id="sidebar"> sidebar stuff </div>
   </div>
</body>

<style type="text/css">
html, body {
    height: 100%;         
}
body {
    text-align: center;   
    padding: 0;           
    margin: 0;          
}
#sidebar {
    position:absolute;
    top:0;
    right:-200px;
    width: 200px;
    height:200px;
    background: red;
}
#content {
    position:relative;
    text-align: left;     
    height: 20em;         
    width: 40em;          
    background: blue;     
    margin: 0 auto;        
}
</style>