<!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. 【狼】unity3d collision获取碰撞的点的位置

    void OnCollisionEnter(Collision ctl) { ContactPoint contact = ctl.contacts[]; Quaternion rot = Quate ...

  2. 364. Nested List Weight Sum II

    这个题做了一个多小时,好傻逼. 显而易见计算的话必须知道当前层是第几层,因为要乘权重,想要知道是第几层又必须知道最高是几层.. 用了好久是因为想ONE PASS,尝试过遍历的时候构建STACK,通过和 ...

  3. python处理xml的常用包（lib.xml、ElementTree、lxml）

    python处理xml的三种常见机制 dom(随机访问机制) sax(Simple APIs for XML,事件驱动机制) etree python处理xml的三种包 标准库中的xml Fredri ...

  4. Pencil-一个开源免费的UI原型工具，自带ios和android模板

    Pencil是一个开源免费的UI原型工具,自带ios和android模板,可以很方便的做mockup. 下图是一个官方展示的模板:         

  5. Git服务器仓库的搭建和客户端使用方法

    环境说明: 1.fedora21  桌面系统  2.已经配置好yum仓库 一.安装git # yum install git 1.1 创建git用户 创建git账户并登录,直接指定用户目录到/home ...

  6. JAVA基于AE调用GP实现泰森多边形

    调用GP实现数据处理是较快捷.较易入手的方法. 使用JAVA语言基于AE调用GP实现泰森多边形的代码例如以下: public void CreatVoronoi(){ try { GeoProcess ...

  7. Cstyle的UEFI导读：第18.0篇 NVRAM的工作原理(上)

        虽有句话说的好,实用的东西记在脑子里.没有的记在笔记本上. 可是如今的信息量越来越大,并且随着时间的推移记忆力会越来越不可靠,所以仅仅好把近期工作之余看的一些东西记录下来,避免被迅速忘记.这里 ...

  8. 数据存储(一)--SharedPreferences之你不知道的事

    一.SharedPreferences将数据文件保存在指定路径上 SharedPreferences原则上是仅仅能保存在当前应用程序私有的shared_prefs文件夹中,只是也不是绝对的,我们能够用 ...

  9. block代码块介绍

    关于block的简单介绍 什么是block? Block是C语言的一个语法特性,同时也是C语言的运行时特性,它很像C中的函数指针,因为你可以像使用函数指针一样的去使用block对象:它也很像C++中的 ...

  10. thinkphp实现短信验证注册

    前言 注册时经常需要用到短信验证码,本文记录一下思路和具体实现. 短信验证平台使用云片,短信验证码的生成使用thinkphp. 思路 1.用户输入手机号,请求获取短信验证码. 2.thinkphp生成 ...