CSSS实现右侧定宽左侧自适应

我就是我 2022-08-09 15:53 243阅读 0赞

csss实现右侧固定宽度，左侧自适应，或者左恻固定宽度右侧自适应

首先，html结构如下：

注意，html中必须使用div标签，不要妄图使用p标签来达到目的。 因为div有个默认属性，即如果不设置宽度，那他会自动填满他的父标签的宽度。

### 1、固定宽度区浮动，自适应区不设宽度而设置margin ###

### 下面的例子是左边栏固定宽度，右边自适应 ###

<pre name="code" class="html">.clearfix :after{
    	content:'';
    	display:table;
    	clear:both;
    }
    .container {
    	position:relative;
    	width:980px;
    	height:500px;
    	margin:30px auto 0;
    	margin-left:230px;
    	overflow:hidden;
    }
    /* content在left之上，left浮动，content不浮动*/
    .left {
    	float:left;
    	width:300px;
    	height:100%;
    	margin-right:-300px;//此值为固定区宽度值
    	background:#37b5f9;
    }
    .content {
    	height:100%;
    	margin-left:300px;
    	background:red;
    }

这里left设置了宽度并浮动，content没有设置宽度。假如content 默认的宽度为100%,那么它设置了margin后，它的宽度就变成了100%-300,此时content发现自己的宽度可以与left挤在同一行了，于是他就上来了。而宽度100%是相对于他的父标签来的，如果我们改变了他父标签的宽度，那content的宽度也会随着改变。比如我们把浏览器窗口缩小，那container的宽度就会变小，而content的宽度也就变小,但他的实际宽度100%-310始终是不会变的。  
这个方法实现起来是相当不错的，只要我们清除浮动，那永远不会造成底下的footer错位。  
但是这个方法有一个限制，html中left必须在content之前！如果将left放在content之后，那么left便会跑到下面去。  
  
那如果某种情况下要求left在content之后呢？有下面的两种方法。

### 2、固定宽度区使用绝对定位，自适应区仍然设置margin ###

### 下面的例子是左侧固定宽度、右侧自适应 ###

.left {
    	position:absolute;
    	left:0;
    	top:0;
    	width:300px;
    	height:100%;
    	/*height:700px; 并不能撑开父元素，这就是绝对定位 存在的问题*/
    	/*background:#37b5f9;
    }
    .content {
    	height:100%;
    	margin-left:300px;
    	background:red;
    }

但是这种情况下left变成了绝对主义分子，它是脱离文档流的。如果它的高度高于父元素的高度，那它并不能撑开父元素的高度，也就是说会下下面的footer元素错位。

### 3、对自适应宽度区同时使用margin和left ###

### 其实，如果content也设置float的话，它的宽度是没法自适应的。这里就需要将content的宽度设置为100%,同时将内容区域包裹在子元素中，html结构变为了如下； ###

<div class="container clearfix">
    	
    	<div class="content">
    		<div class="contentb">自适应宽度</div>
    	</div>
    	<div class="left"></div>
    </div>
    <div class="footer"></div>

以下是右侧定宽，左侧自适应。

.left{
    	float:right;
    	width:300px;
    	height:100%;
    	background:#37b5f9;
    }
    .content{
    	float:left;
    	width:100%;
    	height:100%;
    	margin-left:-300px;
    	background:red;
    }
    .contentb {
    	font-size:16px;
    	color:black;
    	margin-left:300px;
    }

给content设置了100%，同时向左偏移300px,这样一来，content里的内容也跟着偏移了300px,导致被遮住了，所以要把它重新挤出来。所以需要用一个额外的div将内容包裹起来。同时给其一个宽度，设置,margin-left:300px;这时，真正的'content'就变成了contentb,它的宽度跟以前的content一样。不过这里要注意给container设置overflow:hidden.

### 4、标准浏览器的方法 ###

将container设为  display:table 并指定宽度 100%，然后把content 和left设置为display:table-cell；然后给left指定一个宽度，这时content便为自适应的了。 但是IE7不支持该方法。  
  如果不考虑IE7可以使用第4种方法，如果不在意content和left的顺序，则使用第一种方法，否则使用第3种方法。