<!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-Type" content="text/html; charset=utf-8" />

<title>混合布局编程挑战</title>

<style type="text/css">

body{ margin:0; padding:0; font-size:30px; color:#fff}

.top{width:100%; height:100px; background:#999;}

.main{width:100%;height:500px; background:#F00; position:relative;}

.left{width:200px; height:500px; background:#00F; position:absolute; top:0; left:0;}

.right{height:500px; margin-left:210px; background:#906;}

.foot{width:100%; height:100px; background:#F90;}

</style>

</head>

<body>

<div class="top">top</div>

<div class="main">

    <div class="right">right</div>

    <div class="left">left</div>

</div>

<div class="foot">foot</div>

</body>

</html>

网页main中左边固定宽度，右边自适应。的更多相关文章

  1. Beamer中左边画图, 右边文字解释

    \begin{columns} \column{.4\textwidth} \begin{figure} \centering % Requires \usepackage{graphicx} \in ...

  2. css布局：左边固定宽度，右边自适应宽度或右侧固定，左侧自适应三种方法

    方法一:浮动布局 这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...

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

    左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到 ...

  4. css布局：左边固定宽度，右边自适应；右边固定宽度，左边自适应

    左边固定宽度,右边自适应 浮动布局的方法 <section class="container homeSection" id="mainSection"& ...

  5. css网页布局 --- 左边固定，右边自适应

    div的布局统一如下: <body> <div class="wrap"> <div class="left"></d ...

  6. CSS 布局实例系列（二）如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局

    最近在百度 IFE 训练营中看见的一道题目: 用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定.右侧部分宽度随浏览器宽度的变化而自适应变化  个人总结出如下三种实现思路: 通过绝对定位实现 S ...

  7. css实现左边定宽右边自适应的5种方法总汇

    在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left&quo ...

  8. css 关于两栏布局，左边固定，右边自适应

    好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...

  9. css布局：左边定宽、右边自适应

    方法一 : 左边 左浮动,右边 margin-left *{margin: 0;padding: 0;} .left{ float: left; width: 200px; border: 1px s ...

随机推荐

  1. Linux学习笔记24——进程管道

    一 管道的作用 通常把一个进程的输出通过管道连接到另一个进程的输入. 二 popen和pclose函数 #include <stdio.h> FILE *popen(const char ...

  2. Android学习笔记（四）深入探讨Activity

    在应用程序中至少包含一个用来处理应用程序的主UI功能的主界面屏幕.这个主界面一般由多个Fragment组成,并由一组次要Activity支持.要在屏幕之间切换,就必须要启动一个新的Activity.一 ...

  3. JavaScript高级程序设计4.pdf

    虽然执行环境的类型总共只有两种——全局和局部(函数),但还有其他方法延长作用域链,有些语句可以在作用域链的前端临时增加一个变量对象,执行后会被移除try-catch语句的catch块和with语句 w ...

  4. MFC图形处理

    关于MFC绘图功能入门 创建Dialog based MFC工程    打开Resource view 下的Dialog主界面 添加Picture control控件,为此控件添加CStatic的co ...

  5. codeforces 385C Bear and Prime Numbers 预处理DP

    题目链接:http://codeforces.com/problemset/problem/385/C 题目大意:给定n个数与m个询问区间,问每个询问区间中的所有素数在这n个数中被能整除的次数之和 解 ...

  6. arm 及ndk编译

        首页  »   Android android的armeabi跟armeabi-v7a 网友分享于:2014-03-16  浏览:867次 android的armeabi和armeabi-v7 ...

  7. 10 个用于收集硬件信息的 Linux 命令

    知道自己的Linux系统运行在什么样的硬件组件上总是好的,因为如果涉及到在系统上安装软件包和驱动程序的话,这将有助于你处理兼容性问题. 因此,下面我们将给出一些非常有用的命令,它们可以帮助你提取你的L ...

  8. Centroid - SGU 134(树的搜索)

    题目大意:给你一个树,树每个点都有一个值, 这个点的的值就等于所有儿子里面点最多的那个儿子,值最小的就叫做重心,求出重心,还有所有等于重心的点,按照升序输出. 分析:就是一个简单的搜索树,求出来最大的 ...

  9. [CF 351B]Jeff and Furik[归并排序求逆序数]

    题意: 两人游戏, J先走. 给出一个1~n的排列, J选择一对相邻数[题意!!~囧], 交换. F接着走, 扔一硬币, 若正面朝上, 随机选择一对降序排列的相邻数, 交换. 若反面朝上, 随机选择一 ...

  10. BZOJ1176: [Balkan2007]Mokia CDQ分治

    最近很不对啊=w= 写程序全是bug啊 ans数组开小了竟然一直不知道,小数据没问题大数据拍不过,交上去RE 蛋疼半天 这个主要把每次询问拆成3个询问. #include<cstdio> ...