<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>左边自动适应,右边固定</title>
<style type="text/css">
html,body {height: 100%;padding: 0; margin: 0; }
.parent{
width:600px;
height: 450px;
position: relative;
background-color: red;
}
.left{
background-color: red;
height: 100%;
width:100%;
float:left;
margin-left:-100px;
}
.right{
width: 100px;
background-color: #E6E9F0;
height: 100%;
float:right;
}
</style>
</head>
<div class="parent">
<div class="left">
<div style="margin-left: 100px;width: 100%;height: 100%;">left</div>
</div>
<div class="right">
right
</div>
</div>
</html>
DIV 布局之左右布局左侧自动适应右侧固定
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 这是我们经常可能会遇到到一种布局方法,或者是右侧固定,左侧自适应,下面列出我归纳总结的几种方法,是实际开发中比较常...
- "左边固定,右边自适应的两栏布局",其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与gri...
- 左侧宽度固定,右侧宽度自适应的两栏布局与两侧宽度固定,中间宽度自适应的三栏布局一样,都是属于很基础很常见同时又十分...