简体中文(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
原創
1168 人瀏覽過

　　有时候我们会有这样的需求，如图，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學習者快速成長！