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

最新推荐文章于 2023-11-04 18:58:10 发布

cwzhsi

最新推荐文章于 2023-11-04 18:58:10 发布

阅读量2.3k

点赞数

分类专栏： css 文章标签：左侧定宽右侧自适应

本文链接：https://blog.csdn.net/cwzhsi/article/details/49517525

版权

css 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

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

首先，html结构如下：

<body> <div class="container clearfix"> <span style="font-family: Arial, Helvetica, sans-serif;"><div class="left"></div>  <div class="content"></div>  </div>   <div class="footer"></div></body></span>

注意，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> -->
	<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种方法。

cwzhsi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSSS实现右侧定宽左侧自适应

csss实现右侧固定宽度，左侧自适应，或者左恻固定宽度右侧自适应首先，html结构如下： --> 自适应宽度注意，html中必须使用div标签，不要妄图使用p标签来达到目的。因为div有个默认属性，即如果不设置宽度，那他会自动填满他的父标签的宽度。1、固定宽度区浮动，自适应区不设宽度而设置margin下面的例子是左边栏固定宽度，右
复制链接

扫一扫