css实现左侧固定宽度,右侧宽度自适应

#centerDIV {
height: 550px;
width: 100%;
}
#mainDIV {
height: 100%;
border: 1px solid #F00;
margin-left: 102px;
}
#leftDIV {
float: left;
width: 100px;
height: 100%;
border: 1px solid #F00;
}

<div id="centerDIV">
            <div id="leftDIV"></div>
            <div id="mainDIV"></div>
</div>

左侧leftDIV的float:left;width固定,右侧的mainDIV用margin-left

时间: 2024-07-30 11:56:16

css实现左侧固定宽度,右侧宽度自适应的相关文章

css布局之左侧宽度固定,右侧宽度自适应

方案一:利用padding-left预留空间,左侧脱标,右侧宽度相当于父元素的100% <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>左侧宽度固定,右侧宽度自适应</title> <style> .container{ padding-left: 300px; width: 100%; he

css之两栏布局左侧固定右侧高度自适应

css两栏布局之左侧固定右侧高度自适应 先看这样的html+css结构: .main { width: 900px; overflow:hidden; margin: 0 auto; border:1px solid #000; } .left { width: 600px; float:left; background: #ccb; } .right { float:left; width: 300px; background: #acf; } <div class="main"

左侧固定宽度 右侧自适应

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

css左侧固定宽度右侧自适应

左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到效果其实也并不是太难,只是给人感觉像有点蛋疼的问题一样.但是你仔细看后你会觉得不是那么回事: 左边固定,右边自适应布局,这个第一点应该来说是非常的容易,实现的方法也是相当的多,那么就可以说第一条要求已不是什么要求了: 左右两列等高布局,这一点相对来说要复杂一些,不过你要是了解了怎么实现等高布局,那么

css中左侧固定,右侧自适应

谈谈我开始出来工作时候的一道面试题吧 当初我记得在太平洋网络面试的时候,面试官给我出了这么一道题: 有一个外层的div 中间有左右两个div 要求左侧的div 1.只告诉你宽度;       2.只告诉你高度;       3.宽度和高度告诉你;(我总结了可能的3种方式) HTML: <div class="container"> <div class="left">左侧固定宽度200px</div> <div class=

CSS实现侧边栏固定宽度,内容栏自适应

1,固定宽度区浮动,自适应区不设宽度而设置 margin 我们拿右边定宽左边自适应来做示范,CSS代码如下: #wrap {    overflow: hidden; *zoom: 1;  }  #content ,#sidebar {    background-color: #eee;   }  #sidebar {    float: right; width: 300px;  }  #content {    margin-right: 310px;  }  #footer {backg

CSS练习绝对定位于页面宽度自适应

<!DOCTYPE html> <html> <head> <title>九宫格布局</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/ind

老生长谈,温故知新:css实现右侧固定宽度,左侧宽度自适应

反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧? 要实现这种布局,也算比较简单.我们先给出html结构: <div id="wrap"> <div id="sidebar" style="height:240px;">固定宽

css实现右侧固定宽度,左侧宽度自适应

反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域是主体内容区--相信把侧边栏搞成自适应的人很少吧? 要实现这种布局,也算比较简单.我们先给出html结构: <div id="wrap">   <div id="sidebar" style="height:240px;">固