CSSS实现右侧定宽左侧自适应-蒲公英云

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

我就是我 2022-08-09 15:53 309阅读 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种方法。