css中怎样做一个左边固定，右边响应式随屏幕宽度变化而变化的并列的布局？

html-css017

css中怎样做一个左边固定，右边响应式随屏幕宽度变化而变化的并列的布局？,第1张

写一个小例子给你看看，你就明白了

html内容如下

<div class="left">左边的内容</div>

<div class="right">

    <div class="right_content">右边的内容</div>

</div>

css内容如下：

.left{width:200pxfloat:leftmargin-right:-200pxbackground: #00ca57}

.right{width:100%float:left}

.right_content{margin-left:200pxbackground: #269abc}

完美实现，请采纳~！

<style type="text/css">

html, body {margin: 0padding: 0}

.all{ width:100% height:100%}

.left{ width:100px float:left background:#990 height:100%margin-left: -100%}

.right{ width:100% background:#F90 height:100% float:left}

.right_in{ margin-left:100px height:100% }

</style> <div class="all">

    <div class="right">

        <div class="right_in"> 内容</div>

    </div>

    <div class="left">我是固定的</div>

</div>

这样就可以让右侧的宽度自适应，左侧的宽度固定。

原理：

先让右侧的宽度定义为100%；里面的right_in的左边距等于左边固定宽度的尺寸.