网页布局,左固定右自适应宽

<style type="text/css">
    body {
        font: 12px arial;
        color: #000;
        background: #fff;
        margin: 0;
    }

    #header {
        height: 50px;
        color: #fff;
        background: #666;
        line-height: 50px;
        margin-bottom: 10px;
    }

    #right {
        width: 100%;
        color: #fff;
        float: right;
        margin-right: -240px;
    }

    #right_inner {
        height: 400px;
        background: #666;
        margin-right: 240px;
    }

    #left {
        width: 230px;
        height: 400px;
        color: #fff;
        background: #666;
        float: left;
    }

    #footer {
        height: 50px;
        color: #fff;
        background: #666;
        margin-top: 10px;
    }

    .clear {
        clear: both;
    }
</style>
</head>

<body>
    <div id="header">顶部</div>

    <div id="right">
        <div id="right_inner">右侧</div>
    </div>
    <div id="left">左侧</div>
    <div class="clear"></div>

    <div id="footer">底部</div>
时间: 2024-12-26 12:02:38

网页布局,左固定右自适应宽的相关文章

html-v12.25+课堂小练习-布局左固定右自适应

存在一个问题就是当屏幕缩小至一定宽度的时候,边框栏会被挤开 1 body { 2 font-family: 'Amarante', cursive; 3 background: url(http://www.w3cplus.com/sites/default/files/bg_body.png) repeat; 5 } 6 7 .wrapper { 8 margin: 0 auto; 9 } 11 .header-wrapper{ 12 background-color: #BD9C8C; 13

如何布局左固定右边自适应的两列布局?

一,左侧div,float设为left,右侧div设置margin-left属性为左侧div的宽度,外div清除浮动 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <style type="text

CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)

经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下网站源码方法: 一: 右侧固定宽度 左侧自适应  第一种方法:左侧用margin-right,右侧float:right  就可以实现.     HTML代码可以如下写:    <div class="box-left">        <a href="" targ

CSS 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题

一: 右侧固定宽度 左侧自适应  第一种方法:左侧用margin-right,右侧float:right  就可以实现.     HTML代码可以如下写:    <div>        <a href="" target="_blank">我是龙恩</a>    </div> <div>        <a href="" target="_blank">

三栏的网页布局,中间宽度自适应

<!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-

flex左右布局 左边固定 右侧自适应

flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: <div class="item"> <div class="l">LEFT</div> <div class="r"> <div class="title">OMG OMG

网页布局-左侧固定,右侧自适应

在网页布局中,以前只考虑了两列.三列的布局方式,但是没有过多的去考虑在两列.三列布局的情况下实现某些自适应的情况:今天遇到这个问题,在这里mark一下: 方法一:左侧元素浮动或者绝对定位的方式脱离文档流,让两个块级元素能够在同一行显示.然后margin-left的值设置为左侧元素的宽度:在这里利用了div的一个默认规则,div没有设置宽度的情况下会继承父元素的宽度:如果用p等其他标签达不到此效果: <!doctype html> <html> <head> <me

网页布局之---固定布局、流动布局、弹性布局(转)

原文地址 有一个问题已经困扰网页设计师们很久了:该使用固定.流动.弹性,还是混合布局呢?它们各有优缺点.最终的决定取决于网站的可用性,单用某一种布局就想达到目的,可能没那么容易.那么,既然如此令人困惑,是否有做出正确决定的诀窍呢?考虑好几个问题,恰当地设定目标结果,你也能做出融合各方优点的成功布局设计. 为什么要争论这些?网页设计受可用性的大棒指引,而由于网站用户的多样性,已经很难做出对不同用户都有足够可用性的网站. 当设计的网站会面向众多用户时,设计师必须考虑访客之间的下列潜在差异: 屏幕分辨

三栏布局 左右固定 中间自适应

---恢复内容开始--- 传说中的双飞燕布局?好吧 预期效果. 左右两侧 固定像素100px,中间自适应剩余区域 1. 左float + 右float + 中 设为BFC(overflow:hidden) 注意不可用clear属性,此外 main区域需要位于left right之后 HTML结构 <div class="left">左</div> <div class="right">右</div> <div c