CSS如何实现”右部宽度固定，左部自适应“的布局

时间：2022-12-03 19:39:32

吃过晚饭后，开始刷前端笔试题，却遇到了一道CSS难题——使用CSS实现左部自适应、右部固定宽度为200px的布局。当时第一眼看到题目时，以为只是一道很简单的题目。不就是定义两个左浮动的div，右部的宽度固定为200px，左部的宽度为100%，但是真的是那么简单吗？我当时信心十足的以为真的就是这么简单的！看来，自信真的是来源于无知啊！于是马上切换到sublime开始编码了。当时，写好的第一个版本大概如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>index20</title>

    <style>

        /*reset default style*/

        * {

            padding: 0;

            margin: 0;

        }

        .left {

            border: 2px solid green;

            height: 320px;

            width: 100%; /*宽度为100%*/

            float: left; /*左浮动，使其脱离文档流*/

        }

        .right {

            border: 2px solid blue;

            height: 320px;

            width: 200px; /*固定宽度200px*/

            float: left; /*左浮动，使其脱离文档流*/

            margin-left: -210px; /*设置margin-left为负数，可以和左部div在一行*/

        }

    </style>

</head>

<body>

    <div class="left">

        Hi I on at the left side!

    </div>

    <div class="right">

        Hi, I on the right  side!

    </div>

</body>

</html>

在chrome浏览了一下，效果如下：

CSS如何实现”右部宽度固定，左部自适应“的布局

乍一看，上面的效果好像已经达到了我们的题目要求了。但是，接下bug就开始暴露出来了！就在我为自己完成了任务而高兴时，就打开新浪新闻放松一下。手贱的我，看完了一条关于谷歌alphago完爆韩国*棋手小李的新闻时，然后随便复制了下来，放到left里面，这时候，我开始慌了，效果如下:

CSS如何实现”右部宽度固定，左部自适应“的布局

Oh,我的天呐！左部的内容竟然溢出了而且还跑到了右部去了！本以为自己的布局已经达到了十全十美的了，现在问题却突然暴露出来了。心好累啊！

然而，心累有个卵用啊。既然bug都已经暴露了，那就老老实实的debug吧！

静静的的发呆了数分钟，总算明白了，bug题的根源在于我给左部的元素设置了宽度为100%了，这个100%并不是整个可视区域减去右部元素之后的100%，而是直接就是整个可视区域的100%了！所以，它就理所当然的会布满整个可视区域的了！但是，如果，我不用100%的话，那还有什么办法啊？

这下，可真的把我难倒了！此刻失落的心情应该和韩国小李有的一比！

但是，我并没有这样就认输了！后来，尝试试了好久，总算发现了一种可行的解决方案了：在左部元素里面再添加加一个div，而它才是真正的自适应宽度的div，让它的margin-right大约等于右部div的宽度（200）加上左右边框（border）的宽度。代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>index20</title>

    <style>

        /*reset default style*/

        * {

            padding: 0;

            margin: 0;

        }

        .left {

            border: 2px solid green;

            height: 320px;

            width: 100%; /*宽度为100%*/

            float: left; /*左浮动，使其脱离文档流*/

        }

        .right {

            border: 2px solid blue;

            height: 320px;

            width: 200px; /*固定宽度200px*/

            float: left; /*左浮动，使其脱离文档流*/

            margin-left: -210px; /*设置margin-left为负数，可以和左部div在一行*/

        }

        .content {

            /*使这个真正的自适应宽度的div右边距大约等于右部div的盒模型宽度*/

            margin-right: 210px;

        }

    </style>

</head>

<body>

    <div class="left">

        <div class="content">

            这里面是一大串的文字......

        </div>

    </div>

    <div class="right">

        Hi, I on the right  side!

    </div>

</body>

</html>

这时候的效果如下：

CSS如何实现”右部宽度固定，左部自适应“的布局

但是，那个绿色边框跟蓝色边框连在了一起，不是很好看，所以，应该把边框设置在.content元素，而不是.left，如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>index20</title>

    <style>

        /*reset default style*/

        * {

            padding: 0;

            margin: 0;

        }

        .left {

            height: 320px;

            width: 100%; /*宽度为100%*/

            float: left; /*左浮动，使其脱离文档流*/

        }

        .right {

            border: 2px solid blue;

            height: 320px;

            width: 200px; /*固定宽度200px*/

            float: left; /*左浮动，使其脱离文档流*/

            margin-left: -210px; /*设置margin-left为负数，可以和左部div在一行*/

        }

        .content {

            /*使这个真正的自适应宽度的div右边距大约等于右部div的盒模型宽度*/

            margin-right: 210px;

            border: 2px solid green;

        }

    </style>

</head>

<body>

    <div class="left">

        <div class="content">

            这里面是一大串的文字......

        </div>

    </div>

    <div class="right">

        Hi, I on the right  side!

    </div>

</body>

</html>

最终效果，如下：

CSS如何实现”右部宽度固定，左部自适应“的布局

OK，“实现左部自适应宽度，右部固定宽度为200px的布局”这个任务已经完成啦！

这只是我尝试了N次失败之后，发现可行的一种方法而已，当然可能还有很多的其他方法可以实现这样的布局。亲，如果你还有什么idea的话，记得留言交流哦！

CSS如何实现”右部宽度固定，左部自适应“的布局的更多相关文章

  1. CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼

    今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...

  2. css之页面三列布局之左右两边宽度固定，中间自适应

    左右两边宽度固定,中间自适应 左右两边绝对定位 可以利用浮动,左边的左浮动,右边的右浮动 css3 flex布局(html http://www.cnblogs.com/myzy/p/5919814. ...

  3. html - table 表格不被撑开，td某些列宽度固定某些列自适应

    table-layout 属性的解释:http://www.w3school.com.cn/cssref/pr_tab_table-layout.asp 1,实现table细边框,设置如下css: t ...

  4. 使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

    来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...

  5. CSS三列自适应布局（两边宽度固定，中间自适应）

    https://blog.csdn.net/cinderella_hou/article/details/52156333 https://blog.csdn.net/wangchengiii/art ...

  6. 左侧固定，右侧自适应的布局方式理解margin负值理论

    一.浮动布局 1.先让固定宽度的div浮动!使其脱离文档流.2.margin-left的值等于固定div的宽度相等. .aside{ float: left; width: 200px; backgr ...

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

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

  8. 前端一面&sol;面试常考题1-页面布局：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px&comma;中间自适应。

    题目:假设高度已知,请写出三栏布局,其中左栏.右栏宽度各为300px,中间自适应. [题外话:日常宣读我的目标===想要成为一名优雅的程序媛] 一.分析 1. 题目真的像我们想得这么简单吗? 其实不然 ...

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

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

随机推荐

  1. postgres中的中文分词zhparser

    postgres中的中文分词zhparser postgres中的中文分词方法 基本查了下网络,postgres的中文分词大概有两种方法: Bamboo zhparser 其中的Bamboo安装和使用 ...

  2. git删除远程文件夹或文件的方法

    由于本地修改了文件夹大全名大小写的原因,同步到git上并不区分大小写,造成了一些文件同步不了,所以要先把git远程库上文件夹删除掉,然后再重新同步 如下,我把src里的全部移除,但是本地文件还保留. ...

  3. yii1&period;1&period;3主从&lpar;多从&rpar;、读写分离配置

    从新配置main.php片段 代码如下 ----------------------------------------------------------- 'db'=>array( 'con ...

  4. 消息推送SignalR

    一.什么是 SignalR ASP.NET SignalR is a library for ASP.NET developers that simplifies the process of add ...

  5. android开发之wheel控件使用详解

    出门在外生不起病呀,随便两盒药60多块钱.好吧,不废话了,今天我们来看看wheel控件的使用,这是GitHub上的一个开源控件,用起来十分方便,我们可以用它做许多事情,比如做一个自定义的datepic ...

  6. bzoj 1189

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1189 这道题目看起来好像要用很高端的网络流. 这道题有一个特别之处,就是每一个空地都有人,不是 ...

  7. 小猪的Android入门之路 Day 7 part 2

    小猪的Android入门之路 Day 7 part 2 Android的数据存储与訪问之--SharedPreferences(保存偏好參数) ---转载请注明出处:coder-pig 本节引言: 在 ...

  8. 设备 VMnet0 上的网桥当前未运行。此虚拟机无法与主机或网络中的其他计算机通信。

    http://www.cnblogs.com/baihuitestsoftware/articles/4223552.html 因为试用Windows10教育版下的Docker打开过Hyper-V,虽 ...

  9. Python做web开发，推荐几个能立马上手的小项目

    Python这门优美的语言是非常适合web开发的,基于Python的Django框架简单便捷且很强大. 那么作为新手该如何上手这门语言?一切不敲代码的学编程手段都是扯淡,今天就推荐一些适合新手练手的P ...

  10. Ubuntu下安装软件、卸载

    Ubuntu下安装软件.卸载 一般的安装程序有三种: .deb和.rpm这2中安装文件 .boudle这是二进制安装文件 .tar.gz文件是压缩包,与.rar和.zip压缩包一样,安装此类文件需要先 ...

相关文章