DIV+CSS布局左侧不固定,右侧固定,如何实现?

当左侧有一个宽图超过屏幕大小(需要完全显示),让页面撑出屏幕,不被挤到下面,右侧仍在右侧,

<div id="container">
<div id="sidebar">This is the sidebar</div>
<div id="content">2列当左侧有一个宽图超过屏幕大小(需要完全显示),让页面撑出屏幕,不被挤到下面,右侧仍在右侧,<img name="" src="" width="1000" height="32" alt="" /> </div>
</div>

CSS应该如何做?

body { font-family:Verdana; font-size:14px; margin:0;}

#container {margin:0 auto; width:100%;}
#sidebar { float:right; width:200px; height:500px; background:#9c6;}
* html #sidebar{margin-left:-3px;}/*使用此方法解决ie 3像素bug可通过验证*/
#content { height:500px; background:#ffa;}
zcqh520:
能不能写一下代码,谢谢,我不会CSS,呵,
而且定位好像右侧的层会覆盖左侧,我想让右侧随左侧延伸,就像使用表格的效果一样,

新英阻鼾器:
#content { height:500px; background:#ffa;overflow:hidden;margin-right:X px}
这样加对吧?还是不行啊,图片还是会移下去,X还是变成数字?但都不行哦,

liushui101:
#sidebar { float:left; width:200px; height:500px; background:#9c6;z-index:99;position:absolute;left:0px;top:0px;}
这样改了右侧内容成左侧了,而且覆盖了原左侧的层,

xbc0010249:
是给content加overflow:auto么?没有变化啊,

可以将右侧的div设置z-index:99;position:absolute;left:0px;top:0px;

必要时可以用js判断屏幕大小设定div的left和top值
温馨提示:内容为网友见解,仅供参考
第1个回答  2010-04-13
在左侧的DIV容器里面加一个:overflow:hidden;试试看!

给左侧容器加个又边界:margin-right:X px
第2个回答  2010-04-15
除了用CSS overflow:auto 然后限定左侧的宽度 来使左侧产品滚动条之外别无办法
第3个回答  2010-04-13
这个都好办嘛!
用定位呀!

CSS+DIV怎么实现网页左右两栏高度一致?
可以通过JQ来获取右边高度再付值给左边。这样,右边内容再多,JQ也能把它的高度付值给左边,这样就会两边一样。<script type="text\/javascript" src="jquery-1.8.2.min.js"><\/script><script type="text\/javascript">\/\/判断控制页面初始时左右的高度一致 var hl = $(".left").outerHeight(...

div+css怎么居左居右剧中
1、居左:对要靠左对齐(局左)的div样式加float:left。示例代码:css部分:<style> .divcss5-left{float:left;width:250px;height:50px;border:1px solid #F00} <\/style> HTML部分:<div class="divcss5-left">此DIV靠左对齐显示<\/div> 2、居右:对要靠右对齐(局右)的div样式加float:r...

如何用DIV+CSS将网页布局 左中右 并列
接着,为左侧元素添加margin-left属性,使其与容器边缘保持10px的距离。同样,中间和右侧元素亦需添加margin-left属性,保持相同的间隔。最后,加入一个 标签并添加clear:both属性,以清除浮动,确保布局不会因浮动元素而产生意外的换行。通过这些CSS样式调整,能够实现网页布局中左右中并列显示的效果,即使宽...

实现css两栏布局、右侧自适应、三栏布局中间自适应
28}2930.main{31margin:0110px;32background:black;33color:white;34}35<\/style>3637<divclass="container">38<divclass="left">左边固定宽度<\/div>39<divclass="right">右边固定宽度<\/div>40<divclass="main">中间自适应<\/div>41<\/div> 实现流程:左右两边使用绝对定位,固定在两侧。中间占满...

DIV+CSS两列,左列宽度自适应右列固定
接下来我们在桌面新建一个文件夹,命名为“DIV+CSS布局练习”,在文件夹下新建两个空的记事本文档,输入以下内容:<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" "http:\/\/v.ku6.com\/special\/index_2182311.html"> <html xmlns="http:\/\/v.ku6.com\/special\/index_2182311...

css+div布局,左右两个div怎么能自动适应高度
先设置div+css 基本布局:<div id="mm"> <div id="mm1">左边<\/div> <div id="mm2">右边<\/div> <\/div> js 实现 div 自适应高度 代码如下:<script type="text\/javascript"> <!-- window.onload=window.onresize=funct { if document.getElementByIdx_x "mm2" .clientHeight<document....

DIV+CSS页面基本布局总结
1. 固定宽度布局 实现方式:设置元素css样式(margin:0 auto;),使元素在父元素宽度下水平居中。示例代码:HTML、CSS、图片展示 特点:元素宽度固定,使用margin属性实现居中。2. 自适应宽度布局 布局思路:固定宽度+浮动与定位。布局流程:1.设左右列宽度,左浮动;2.中间栏设左右边距等于左右列宽度。...

一个DIV里,一边靠左,一边靠右,怎么实现?
说明:这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。具体实现步骤如下:1、设计一个html页面,一个标签元素div或者ul里,放入多行数据。2、设计最外层容器样式文件:3...

div+css布局错乱问题解决方法
这个问题需要把left和right再使用一个div包含起来,直接上代码啦,下边就可以实现你要求的布局。foot总在下边,并能随着left,right的高度改变自动调整。<div id="box"> <div id="content"> <div id="left">这里是页面的左部分内容<\/div> <div id="right">这里是页面的右部分内容<\/div> <\/...

编写CSS+DIV代码完成三列固定宽度的网页结构布局
<style type="text\/css"> {margin: 0;padding: 0;} body{width:1012px;} div{ width: 300px;height: 300px;border: 2px solid #333;border-sizing:border-box;\/*将边框设置为内边框 这样就不影响元素的宽度和高度,这样正好右列二到页面左边距正好是700px ,没有这个属性的话是708px*\/ f...

相似回答