这是百度的一道笔试题，网上的答案相当统一的只有一个。但是我本人不是很喜欢使用position：absolute这种属性，所以自己重新写了一个。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<div>
<div id="left" style="float:right;width:100%; height:200px;">
<div style="margin-right:200px;height:200px;background-color:red;"></div>
</div>
<div id="right" style="float:right;margin-right:-100%;width:200px;height:200px;background-color:green;"></div>
</div>
</BODY>
</HTML>
不过这个有一个问题，就是随着浏览器窗口红色区域变到0以后会发生错行。下面是相反的情况，即”右侧自适应，左边固定宽度200“
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<div>
<div id="left" style="float:left;width:100%; height:200px;">
<div style="margin-left:200px;height:200px;background-color:red;"></div>
</div>
<div id="right" style="float:left;margin-left:-100%;width:200px;height:200px;background-color:green;"></div>
</div>
</BODY>
</HTML>
分享到：
相关推荐
在CSS布局设计中，创建一个典型的三行两列居中高度自适应的页面布局是一项常见的任务，这有助于确保网页在不同设备和浏览器上保持良好的视觉效果。以下将详细讲解如何实现这种布局，以及代码示例中涉及的关键CSS属性...
【网页一行两列背景自适应】的实现是一个经典的CSS布局挑战。在网页设计中，有时候我们需要将页面主体分为左右两栏，每栏拥有不同的背景颜色，同时要求这两栏的背景高度能够随着各自内容的多少自动调整，保持一致。...
- **宽度自适应布局**：宽度自适应布局允许网页内容根据浏览器窗口大小变化而自动调整宽度。这可以通过设置Div的宽度为百分比实现，例如，设置一个宽度为75%的Div： ```css .responsive-column { width: 75%; ...
CSS左右两列自适应高布局是一种网页布局技术，用于创建一个由左右两部分组成的页面布局，且这两列的高度能够自动调整以匹配最高的列，无论内容多少。这种布局对于创建对称的页面结构非常有用，例如双栏式布局，一侧...
在传统的CSS布局中，`float`属性常用于创建多列布局。在两列自适应布局中，可以将左侧栏设置为浮动（`float: left`），然后通过`margin-right`为右侧栏创建间距。然而，当两列都需要自适应时，单纯的`float`方法无法...
本示例探讨了如何使用HTML和CSS实现一个两列布局，其中左侧宽度固定，右侧则自适应剩余空间。以下是对这两种方法的详细解释： **实现一：利用浮动（Float）** 在第一种方法中，我们主要利用CSS的`float`属性来实现...
CSS两列布局是指在一个容器中，左侧和右侧各占据一部分的空间，左右两侧的宽度可以是固定的，也可以是一侧固定另一侧自适应宽度。下面是CSS两列布局的示例代码： ```html <div style="width:90%; margin:0 auto;"> ...
本文将详细介绍四种CSS方法来实现这种布局，即左列固定宽度，右列自适应宽度。 1. **使用绝对定位（Absolute Positioning）** 这种方法是通过设置`.side`为绝对定位，使其固定在左侧，然后设置`.main`的左边距（`...
在网页设计中，CSS两列布局是常见的网页结构，它通常包括一个固定宽度的侧边栏（sidebar）和一个自适应宽度的主内容区域（main）。这篇文章主要总结了两种常用的CSS布局方法：absolute + margin和float + margin，来...
以上四种布局方式只是CSS布局的基本示例，实际开发中可能需要结合其他CSS技术，如Flexbox或Grid来实现更复杂的布局。理解这些基础布局模式是成为熟练CSS开发者的关键步骤。通过不断练习和探索，你将能够创建出符合...
1. 固定宽度与自适应宽度布局：文件中提到的“左侧固定宽度，右侧自适应屏幕宽度”的布局是一个常见的布局需求。实现这种布局通常有两种方法，第一种是使用浮动（float）来控制左侧元素固定宽度，并使用 margin-left...
标题中所涉及的知识点是如何使用CSS来实现左侧固定宽度，而右侧自适应宽度的布局设计。这在网页设计中是一种常见的需求，尤其是在构建分栏布局时。左侧通常用于导航菜单或固定栏，右侧则显示主要内容。描述部分提到...
两栏布局是指将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满。这种布局适用于内容上具有明显主次关系的网页。 实现方法： 1. 使用 float 左浮左边栏 2. 右边模块使用 margin-...
3.6 两列右列宽度自适应 3.7 二列固定宽度居中 3.8 三列浮动中间列宽度自适应 3.9 高度自适应 3.10 盒模型详解(.Box Model) 3.10.1 什么是盒模型 3.10.2 盒模型的细节 3.10.3 上下margin叠加问题 3.10.4 左右margin...