<!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. MacOS下的生活——RescueTime，时间规划利器

    前段时间Yxj同学给我推荐了一款可以记录电脑及手机使用时间分类的软件,据说Mac平台下也支持,当时就有了兴趣,但是好像因为什么事给耽搁了,知道今天下午看到Yxj在看这个软件记录的自己的时间表,才觉得这 ...

  2. JavaScript高级程序设计2.pdf

    第三章 基本概念 区分大小写 ECMAScript中的一切(变量.函数名和操作符)都区分大小写 标识符 指变量.函数.属性的名字或者函数的参数 第一个字符必须是一个字母.下划线或美元符号,其它字符可以 ...

  3. ACM2096_小明A+B

    #include<iostream> int main() { using namespace std; int a,b,count; cin>>count; while(co ...

  4. CentOS添加swap分区

    在多个VPS上尝试. 1.进入目录 cd /var/ 2.获取要增加的SWAP文件块(这里以1GB为例) dd if=/dev/zero of=swapfile bs=1024 count=10383 ...

  5. Goole音乐搜索

    本博文的主要内容有   .Goole音乐搜索的介绍  1.Goole音乐搜索的介绍 https://zh.wikipedia.org/wiki/%E8%B0%B7%E6%AD%8C%E9%9F%B3% ...

  6. JVM分代垃圾回收策略的基础概念

    由于不同对象的生命周期不一样,因此在JVM的垃圾回收策略中有分代这一策略.本文介绍了分代策略的目标,如何分代,以及垃圾回收的触发因素. 文章总结了JVM垃圾回收策略为什么要分代,如何分代,以及垃圾回收 ...

  7. 417. Pacific Atlantic Water Flow

    正常做的,用了645MS..感觉DFS的时候剪枝有问题.. 为了剪枝可能需要标记一个点的4种情况: 1:滨临大西洋,所有太平洋来的点可以通过: 2:濒临太平洋,所有大西洋来的点可以通过: 3:都不濒临 ...

  8. firefox如何restart重启

    1.开发者工具栏可以对firefox进行重启,不是关闭firefox又打开那种重启

  9. Tomcat配置多个端口号或多个应用

    一.在Tomcat下配置一个应用服务(service)中,配置多个端口号. 即一个service配置多个端口,项目可以通过多个端口访问. 修改tomcat-home\conf下的server.xml, ...

  10. Linux下对后台进程通过kill传递信号不起作用的问题

    在阅读APUE信号一章时,我遇到Linux下对后台进程通过kill传递信号不起作用的问题 具体情形与如下链接中的老兄一致: http://bbs.csdn.net/topics/390335913?p ...