search

Chenjiayuan195 / Summary-of-front-end-knowledge-points

1 stars 0 forks source link

CSS：实现一个两边固定，中间自适应布局 #16

Open Chenjiayuan195 opened 4 years ago

Chenjiayuan195 commented 4 years ago

1.左右侧采用浮动 中间采用margin-left 和 margin-right 方法(固定宽度)

<div style="width:100%; margin:0 auto;"> 

       <div style="width:200px; float:right; background-color:#960">这是右侧的内容 固定宽度</div>

       <div style="width:150px; float:left; background:#6FF">这是左侧的内容 固定宽度</div>

       <div style="margin-left:150px;margin-right:200px; background-color:#9F3">中间内容，自适应宽度</div>

    </div>

2.左右两侧采用绝对定位 中间同样采用margin-left margin-right方法