CSS布局 -- 左侧定宽，右侧自适应

　　左侧定宽，右侧自适应

有很多种方法可以实现

缩小窗口试试看？

方案一：

左边左浮动，右边加个margin-left

查看 demo

<!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 charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>左侧定宽，右侧自适应(1)</title>
<style type="text/css">
    *{margin: 0;padding: 0;}
    .left{
        float: left;
        width: 200px;
        border: 1px solid #333;
        background: #aaa;
    }
    .right{
        margin-left:200px;
        border: 1px solid #333;
        background: #ccc;
        word-break: break-all;
    }
</style>
</head>
<body>
    <div class="left">
    <h4>left</h4>
        <p>oooooooooooooo
        0000000000000000
        00000000000000000
        ooooooooooooooo
        ooooooooooooooo
        000000000000000</p>
    </div>
    <div class="right">
    <h4>right</h4>
        <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
        888888888888888888888888888888888
        BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
        888888888888888888888888888888888</p>
    </div>
</body>
</html>

方案二：

左边左浮动，右边overflow：hidden 不过这种方法IE6下不兼容

查看 demo

<!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 charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>左侧定宽，右侧自适应(2)</title>
<style type="text/css">
    *{margin: 0;padding: 0;}
    .left{
        float: left;
        width: 200px;
        border: 1px solid #333;
        background: #aaa;
    }
    .right{
        overflow: hidden;
        border: 1px solid #333;
        background: #ccc;
        word-break: break-all;
    }
</style>
</head>
<body>
    <div class="left">
    <h4>left</h4>
        <p>oooooooooooooo
        0000000000000000
        00000000000000000
        ooooooooooooooo
        ooooooooooooooo
        000000000000000</p>
    </div>
    <div class="right">
    <h4>right</h4>
        <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
        888888888888888888888888888888888
        BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
        888888888888888888888888888888888</p>
    </div>
</body>
</html>

方案三：

左边使用绝对定位，右边使用margin-left

查看 demo

<!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 charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>左侧定宽，右侧自适应(3)</title>
<style type="text/css">
    *{margin: 0;padding: 0;}
    .left{
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        border: 1px solid #333;
        background: #aaa;
    }
    .right{
        margin-left:200px;
        border: 1px solid #333;
        background: #ccc;
        word-break: break-all;
    }
</style>
</head>
<body>
    <div class="left">
    <h4>left</h4>
        <p>oooooooooooooo
        0000000000000000
        00000000000000000
        ooooooooooooooo
        ooooooooooooooo
        000000000000000</p>
    </div>
    <div class="right">
    <h4>right</h4>
        <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
        888888888888888888888888888888888
        BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
        888888888888888888888888888888888</p>
    </div>
</body>
</html>

方案四：

左边绝对定位，右边也绝对定位

查看 demo

<!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 charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>左侧定宽，右侧自适应(4)</title>
<style type="text/css">
    *{margin: 0;padding: 0;}
    .left{
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        border: 1px solid #333;
        background: #aaa;
    }
    .right{
        position: absolute;
        left: 200px;
        top:0;
        border: 1px solid #333;
        background: #ccc;
        word-break: break-all;
    }
</style>
</head>
<body>
    <div class="left">
    <h4>left</h4>
        <p>oooooooooooooo
        0000000000000000
        00000000000000000
        ooooooooooooooo
        ooooooooooooooo
        000000000000000</p>
    </div>
    <div class="right">
    <h4>right</h4>
        <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
        888888888888888888888888888888888
        BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
        888888888888888888888888888888888</p>
    </div>
</body>
</html>

方案五：

这种方法相对来说就有点复杂了，右边的div里边还有一个div

查看 demo

<!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 charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>左侧定宽，右侧自适应(5)</title>
<style type="text/css">
    *{margin: 0;padding: 0;}
    .left{
        float: left;
        margin-right: -100%;
        width: 200px;
        border: 1px solid #333;
        background: #aaa;
    }
    .right{
        float: left;
        width: 100%;
    }
    .inner-right{
        margin-left: 200px;
        border: 1px solid #333;
        background: #ccc;
        word-break: break-all;
    }
</style>
</head>
<body>
    <div class="left">
    <h4>left</h4>
        <p>oooooooooooooo
        0000000000000000
        00000000000000000
        ooooooooooooooo
        ooooooooooooooo
        000000000000000</p>
    </div>
    <div class="right">
    <div class="inner-right">
    <h4>right</h4>
        <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
        888888888888888888888888888888888
        BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
        888888888888888888888888888888888</p>
        </div>
    </div>
</body>
</html>

时间： 2025-01-11 20:14:19

CSS布局 -- 左侧定宽，右侧自适应的相关文章

CSS基础布局--居中对齐，左侧定宽右侧自适应

CSS页面布局是web前端开发的最基本的技能,本文将介绍一些常见的布局方法,涉及到盒子布局,column布局,flex布局等内容.本文中,你可以看到一些水平垂直居中的方法,左侧固定宽度,右侧自适应的一些方法.如果你有更多关于布局方面的技巧,欢迎留言交流. 一.神奇的居中经常看到有一些面试题问如何实现水平垂直居中,还要求用多种方法.唉唉唉!下面介绍一下我所知道的实现居中的方法. (1)父元素relative;子元素absolute,top:50%;left:50%;margin-left:-自己

请给出一个左侧定宽右侧自适应的HTML结构及样式

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>左右布局(左侧定宽,右侧自适应宽)</title><style type="text/css">body{font:12px arial;color:#000;b

CSS左侧固定宽右侧自适应（兼容所有浏览器）

左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到效果其实也并不是太难,只是给人感觉像有点蛋疼的问题一样.但是你仔细看后你会觉得不是那么回事: 左边固定,右边自适应布局,这个第一点应该来说是非常的容易,实现的方法也是相当的多,那么就可以说第一条要求已不是什么要求了: 左右两列等高布局,这一点相对来说要复杂一些,不过你要是了解了怎么实现等高布局,那么

html+css实现左侧定宽，右侧自适应的布局

实现一侧定宽,一侧自适应的布局的方法a .b a.利用左侧元素浮动,或者绝对定位的方式使其脱离常规文档流 1.方法一:利用float和margin来实现 css <style> .father{border:1px solid #444;overflow:hidden;} .father img{width:60px;height:64px;float:left} .father p{margin-left:70px;padding-right:20px;} </style> ht

CSS左侧固定宽右侧自适应（兼容所有浏览器）（转载）

CSS布局 -- 左右定宽，中间自适应

左右定宽,中间自适应有几种方法可以实现改变窗口大小看看? 方案一: 左右设置绝对定位,定宽,中间设置margin-left margin-right 查看 demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

CSS布局——左定宽度右自适应宽度并且等高布局

今天有位朋友一早从妙味课堂转来一个有关于CSS布局的面试题,需要解决,花了点时间写了几个DEMO,放上来与大家分享受.那么我们在看DEMO之前一起先来看看这个面试题的具体要求吧: 左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到效果其实也并不是太难,只是给人感觉像有点蛋疼的问题一样.但是你仔细看后你会觉得不是那么回事: 左边固定,右边自适应布局,

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

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

圣杯布局（定宽与自适应）

圣杯布局小结阅读目录 1. 从2个实际的需求说起 2. 圣杯布局的传统实现方法 3. 圣杯布局传统实现方法的一种变体 4. 圣杯布局的纯浮动实现 5. 圣杯布局的flex实现 7. 结束语圣杯布局,很久之前就听过,但是一直都没详细了解过,最近因为做了一个项目,借鉴了薪人薪事这个公司的产品页面,才第一次用到这种布局方式.于是就花了点时间,测了下它实现常见分栏布局的代码,每段代码都非常简单,但布局效果很完美,比我以前用的方式好用不少.本文是对它实现方式的一些总结,希望可以把这种技术推荐给跟我之前