如何布局左不动右边自适应的两列布局

发布网友发布时间：2022-04-29 11:38

共2个回答

懂视网时间：2022-04-29 15:59

HTML实现2列布局，左侧宽度固定，右侧自适应

实现一：

<style>
 body, html{padding:0; margin:0;}
 // 根据CSS定位，利用浮动或绝对定位，使左侧的块元素脱离常规文档流,可以与右边块元素并列
 div:nth-of-type(1){
 float: left;  //利用浮动
 // postion: absolute; //利用绝对定位
 // top: 0;
 // left: 0;
 width: 300px;
 height: 200px;
 background: red;
 }
 // 【块级元素，默认自动填充父元素宽度，霸占一行】
 // 当前：右侧块元素宽度=父元素宽度
 div:nth-of-type(2){
 // 设置margin-left为左侧块元素的宽度。
 margin-left: 300px;
 // 现在：右侧块元素的宽度=父元素宽度-margin-left
 height: 220px;
 background: blue;
 }
</style>
<html>
 <div>div1</div>
 <div>div2</div>
</html>

1）设置margin-left之前

2）设置margin-left之后

实现二：

<style>
 body, html{padding:0; margin:0;}
 // 根据CSS定位，利用浮动或绝对定位，使左侧的块元素脱离常规文档流
 div:nth-of-type(1){
 float: left;  //利用浮动
 // postion: absolute; //利用绝对定位
 // top: 0;
 // left: 0;
 width: 300px;
 height: 200px;
 background: red;
 }
 // FC是普通（常规）文档流，格式化上下文，是页面中的一块渲染区域，有一套渲染规格。BFC是块级格式化上下文。
 // 利用BFC块级格式化上下文,建立一个隔离的独立容器
 div:nth-of-type(2){
 // 改变overflow的值不为visible，触发BFC
 overflow: hidden;
 height: 220px;
 background: blue;
 }
</style>
<html>
 <div>div1</div>
 <div>div2</div>
</html>

热心网友时间：2022-04-29 13:07

左侧固定宽，右侧自适应屏幕宽；
左右两列，等高布局；
左右两列要求有最小高度，例如：200px;（当内容超出200时，会自动以等高的方式增高）
要求不用JS或CSS行为实现；
仔细分析试题要求，要达到效果其实也并不是太难，只是给人感觉像有点蛋疼的问题一样。但是你仔细看后你会觉得不是那么回事：
左边固定，右边自适应布局，这个第一点应该来说是非常的容易，实现的方法也是相当的多，那么就可以说第一条要求已不是什么要求了；
左右两列等高布局，这一点相对来说要复杂一些，不过你要是了解了怎么实现等高布局，那么也是不难。我个人认为这个考题关键之处就在考这里，考你如何实现等高布局；所以这一点你需要整明白如何实现；
至于第三条要求，应该来说是很方面的，我们随处都可以看到实现最小高度的代码；
第四条这个要求我想是考官想让我们面试的人不能使用js来实现等高布局和最小高度的功能。
上面简单的分析了一下实现过程，那么最终关键之处应该是就是“让你的代码要能同时实现两点，其一就是左边固定，右边自适应的布局；其二就是实现两列等高的布局”，如果这两个功能完成，那么你也就可以交作业了。那么下面我们就先来看看这两点是如合实现：
一、两列布局：左边固定宽度，右边自适应宽度
这样的布局，其实不是难点，我想很多同学都有实现过，那么我就在此稍微介绍两种常用的方法：
方法一：浮动布局
这种方法我采用的是左边浮动，右边加上一个margin-left值，让他实现左边固定，右边自适应的布局效果
HTML Markup
<div id="left">Left sidebar</div>
<div id="content">Main Content</div>

CSS Code
<style type="text/css">
*{
margin: 0;
padding: 0;
}

#left {
float: left;
width: 220px;
background-color: green;
}

#content {
background-color: orange;
margin-left: 220px;/*==等于左边栏宽度==*/
}
</style>

上面这种实现方法最关键之处就是自适应宽度一栏“div#content”的“margin-left”值要等于固定宽度一栏的宽度值，大家可以点击查看上面代码的DEMO
方法二：浮动和负边距实现
这个方法采用的是浮动和负边距来实现左边固定宽度右边自适应宽度的布局效果，大家可以仔细对比一下上面那种实现方法，看看两者有什么区别：
HTML Markup
<div id="left">
Left Sidebar
</div>
<div id="content">
<div id="contentInner">
Main Content
</div>
</div>

CSS Code
*{
margin: 0;
padding: 0;
}
#left {
background-color: green;
float: left;
width: 220px;
margin-right: -100%;
}

#content {
float: left;
width: 100%;
}

#contentInner {
margin-left: 220px;/*==等于左边栏宽度值==*/
background-color: orange;
}

这种方法看上去要稍微麻烦一点，不过也是非常常见的一种方法，大家可以看看他的DEMO效果。感觉一下，和前面的DEMO有什么不同之处。
我在这里就只展示这两种方法，大家肯定还有别的实现方法，我就不在多说了，因为我们今天要说的不是这个问题。上面完成了试题的第一种效果，那么大家就要想办法来实现第二条要求——两列等高布局。这一点也是本次面试题至关重要的一点，如果你要是不清楚如何实现等高布局的话，我建议您先阅读本站的《八种创建等高列布局》，里面详细介绍了八种等高布局的方法，并附有相关代码，而且我们后面的运用中也使用了其中的方法。
现在关键的两点都完成了，那么我们就需要实现第三条要求，实现最小高度的设置，这个方法很简单：
min-height: 200px;
height: auto !important;
height: 200px;