CSS实现两列布局,一列固定宽度,一列宽度自适应方法

前端开发 作者: 2024-08-20 16:35:01
不管是左是右,反正就是一边宽度固定,一边宽度自适应。 博客园的很多主题也是这样设计的,我的博客也是右侧固定宽度,左侧自适应屏幕的布局方式。 html代码: 实现方式方式有如下几种: 1.固定宽度区浮动
<div id="wrap">
  ="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div="content"="height:500px;background:#000;color:#fff;">自适应区>
>
#sidebar {
  float: right; width: 300px;
}
#content {
  margin-right: 300px;
}
>
    class="contentInner">
       自适应区
    >
#content {
  margin-left: -300px; float: left; 100%;
}
#content .contentInner{300px;
}
#sidebar { 300px;
}
>我现在的结构是在前面#wrap{
  position:relative;
}absolute;
  width:300px;
  right:0;
  top:0;
}

  display:table;100%;
}table-cell;
}
 width:table-cell;
}
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_65611.html