简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > html教程 > 正文

CSS 左边div固定，右边div自适应_html/css_WEB-ITnose

WBOY
发布： 2016-06-24 12:27:05
原创
1169 人浏览过

　　有时候我们会有这样的需求，如图，aside是导航或者某些链接，右边的main是显示重要的内容，左边需要定宽，右边的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>    <title>test</title>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <meta http-equiv="Content-Language" content="zh-CN" />    <meta name="Keywords" content="" />    <meta name="Description" content="" />    <!-- <link rel="stylesheet" href="style/.css" type="text/css" /> -->    <style type="text/css">        *{margin:0; padding:0;}        /* div{border:1px solid #CCC;} */        .home{width:70%; min-width:270px;margin:0 auto;}        .header{height:80px; width:100%; background:#CCC}        .nav{height:50px; width:100%; background:#bbb}        .content{}        .content .aside{width:260px; height:400px; float:left; background:#999}        .content .main{height:400px; margin-left:260px; overflow:hidden;zoom:1; background:#eee}        .footer{height:80px; background:#888;}    </style></head><body>    <div class="home">        <div class="header">            header        </div>        <div class="nav">            nav        </div>        <div class="content">            <div class="aside">aside</div>            <div class="main">main</div>        </div>        <div class="footer">            footer        </div>    </div></body></html>
登录后复制

 

相关标签：
CSS 左边div固定，右边div自适应
来源：php.cn
上一篇：DIV CSS 居中代码(以及靠右)_html/css_WEB-ITnose 下一篇：div+css实现带三角箭头提示框_html/css_WEB-ITnose
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
css样式不变,两个div块 交换先后顺序，则会一上一下显示而不能同行显示。这是为什么? <!DOCTYPE html><html><head> <meta charset="UTF-8"> <t...
来自于 2019-03-23 14:11:40
0
2
1164
不知为何我代码浮动不起作用 <!DOCTYPE html><html><head><meta charset="UTF-8"><tit...
来自于 2018-03-26 14:50:58
0
3
1302
IOS 自定义 UIView, 支持 AutoLayout 有固定高度 UILabel 的高度可以根据他的内容和宽度自适应. 在 IB 中, 我们只要设置其左右边距就可以了. 我也想实现一个类似的 自定义 View, 它的宽度是任意的(可以通过 IB ...
来自于 2017-04-17 16:54:07
0
0
146
html - 一道简单CSS的面试题 今天刚刚碰到的 hr要求一个半小时完成 要求DIV自适应大小 边距都是30px，剩下的DIV全部自适应屏幕 如果有根据屏幕大小自动变化CSS样式的更好 要求已经写在图上了 有没有萌...
来自于 2017-04-17 14:56:04
0
5
388
前端 - css table布局大法，解决你大部分居中、多列等高、左右布局的问题 定高水平垂直居中 不定高水平垂直居中 单行定高水平垂直居中 单行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左边定宽右边自适应布局 左边右边定宽...
来自于 2017-04-17 13:49:32
0
0
560
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！