Fatal编程技术网
  • css/
  • XHTML CSS自动高度Div问题

XHTML CSS自动高度Div问题

css html

XHTML CSS自动高度Div问题,css,xhtml,html,Css,Xhtml,Html,基本上，我是在设计一个网站，我用DIV的标题，左栏，右栏和页脚。我想有网站的内容部分扩展到html/文本插入到它，所以我一直在使用高度：自动 我在页眉顶部使用背景图像，页脚底部使用背景图像，网站正文使用1像素高的填充物 我的问题是，如果我试图让右栏位于左栏的右侧，而不是在左栏的下方，我所尝试的一切基本上都会消除中间的背景图像 我相信这可能是件很容易的事，但从昨晚开始我就一直在做这件事，我已经想好了 它是有效的XHTML和CSS（除了jQueryUI，即CSS3，尽管这在结构上并不重要） 有什么想

基本上，我是在设计一个网站，我用DIV的标题，左栏，右栏和页脚。我想有网站的内容部分扩展到html/文本插入到它，所以我一直在使用高度：自动

我在页眉顶部使用背景图像，页脚底部使用背景图像，网站正文使用1像素高的填充物

我的问题是，如果我试图让右栏位于左栏的右侧，而不是在左栏的下方，我所尝试的一切基本上都会消除中间的背景图像

我相信这可能是件很容易的事，但从昨晚开始我就一直在做这件事，我已经想好了

它是有效的XHTML和CSS（除了jQueryUI，即CSS3，尽管这在结构上并不重要）

有什么想法或者有人能给我指一个关于如何使用背景图像获得两列布局的教程吗

<body>
   <div id="top">
         THE TOP IMAGE GOES HERE IN CSS
   </div>
   <div id="wrapper">
        <div id="header">

        </div>

        <div id="navigation">
                </div>

        <div id="content">
            <div id="left-col">

            </div>

            <div id="right-col">

            </div>

        </div>
   </div>

   <div id="bottom">
         THE BOTTOM IMAGE GOES HERE IN CSS
   </div>

   <div id="footer">

   </div>
</body>


#wrapper { 
 margin: 0 auto;
 width: 838px;
 background-image:url('../images/wrapper_bg.gif');
 background-repeat:repeat-y;

}
#header {
 width: 818px;
 color: #333;
 padding: 10px;
 height: 100px;
}

#navigation {
 width: 838px;
}

#content { 
 width: 838px;
 color: #333;
 margin: 0px 0px 0px 0px;

 /*min-height: 800px;*/
 height: auto;
}
#footer { 
 width: 838px;
 color: #333;
 text-align: center;

}

#top{
 margin: 0 auto;
 width: 838px;
 height:14px;
 background-image:url('../images/wrapper_top.gif');
}

#bottom{
 clear: both;
 margin: 0 auto;
 width: 838px;
 height:14px;
 background-image:url('../images/wrapper_bottom.gif');
}

#left-col{
 margin-left: 20px;
 width: 590px;
 float:left;
 height: auto;
}

#right-col{
 width: 170px;
 display: inline;

 height: auto;
 margin-right: 25px;
 color: #777777;
 font-size: 15px;
 padding: 5px;
 font-weight: bold;
}


上面的图像在CSS中显示在这里
下面的图像在CSS中显示
#包装器{
保证金：0自动；
宽度：838px；
背景图像：url（'../images/wrapper_bg.gif'）；
背景重复：重复-y；
}
#标题{
宽度：818px；
颜色：#333；
填充：10px；
高度：100px；
}
#航行{
宽度：838px；
}
#内容{
宽度：838px；
颜色：#333；
保证金：0px 0px 0px 0px；
/*最小高度：800px*/
高度：自动；
}
#页脚{
宽度：838px；
颜色：#333；
文本对齐：居中；
}
#顶{
保证金：0自动；
宽度：838px；
高度：14px；
背景图像：url（'../images/wrapper_top.gif'）；
}
#底部{
明确：两者皆有；
保证金：0自动；
宽度：838px；
高度：14px；
背景图像：url（'../images/wrapper_bottom.gif'）；
}
#左列{
左边距：20px；
宽度：590px；
浮动：左；
高度：自动；
}
#右柱{
宽度：170px；
显示：内联；
高度：自动；
右边距：25px；
颜色：#777777；
字体大小：15px；
填充物：5px；
字体大小：粗体；
}
是网站

有谁能帮我把中间的div扩展到内容，让右栏紧靠左栏，并且后面还有背景图像吗？

我不确定我是否正确理解了你的问题，所以请毫不犹豫地为我指出正确的方向

基本上你想要的链接：常见问题解答，专业。。。Facebook会出现在右边吗

为什么不使用经典：

#right-col {
  float: left;
  margin-left: 610px; /* or perhaps higher */
}
我是正确的还是我没有理解你所说的问题？

将
溢出：隐藏
添加到
#content
。应该这样做。
我已经试过了。它去掉了背景图像，但仍在左栏下方。到目前为止，我让右栏显示在右侧并仍保留背景图像的唯一方法是使框具有静态高度，这不是我想要的。因此，我添加了CSS，当我尝试将右栏浮动到左栏时，您可以看到这里发生了什么左，我丢失了背景图像。我试着缩小左、右cols的宽度，但没有成功。我在这里不知所措，已经花了几个小时在这上面，甚至从头开始重建。