美文网首页
两列布局

两列布局

作者: Pretty_Boy | 来源:发表于2017-09-27 17:01 被阅读17次

左侧固定宽度,右侧自适应。

BFC实现
<div class="container">
    <div class="aside">左列宽度固定</div>
    <div class="main">右列宽度自适应</div>
<div>

.container {
  /* position: relative; */
}
.container .aside {
  float: left;
  width: 200px;
  background: red;
  height:200px;
}
.container .main {
  overflow: hidden;
  background: blue;
  height:200px;
}
Table实现
<div id="main">
    <div id="left">DIVA</div>
    <div id="right">DIVB</div>
</div>
<div id="bottom">DIVC</div>

#left, #right{
    height: 200px;
}
#left {
    width:200px;
    background: red;
}
#right {
    background: blue;
}
#main { display: table; width: 100%; }
#left,#right { display: table-cell; }
#right { width: auto; }
相对绝对定位
<div class="container">
    <div class="aside">左列宽度固定</div>
    <div class="main">右列宽度自适应</div>
<div>

.container {
    position: relative;
}
.container .aside {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
    background: red;
}
.container .main {
    height: 200px; 
        margin-left: 200px;
    background: blue;
}

若要两侧都是自适应时,则使用百分比。

相关文章

  • CSS3开发常用核心技能

    基础网页布局 布局分类 一列布局 两列布局 三列布局 多列布局 一列布局: 二列布局: 三列布局: ⚠️ midd...

  • css常见布局(二)

    采用flex实现两列,三列等多列的布局 一、两列布局 二、三列布局

  • 两列布局

    左固定,右自适应 首先是html代码: 方法:直接只用float就可以,不知道以下方法加上的好处? 方法一:使用f...

  • 两列布局

    左侧固定宽度,右侧自适应。 若要两侧都是自适应时,则使用百分比。

  • 2019-05-09 CSS布局相关

    一,两列布局 1,自适应的两列布局: 两列布局可以使用浮动来完成,左列设置左浮动,右列设置右浮动,这样就不需...

  • 前端常见布局方式

    常见的布局方式 常见的布局这么几种单列水平居中布局, 一列定宽一列自适应布局, 两列定宽一列自适应布局, 两侧定宽...

  • 「CSS」常见布局样例

    自动居中一列布局 横向两列布局 绝对定位的横向两列布局 自动居中一列布局 所需知识: 标准文档流 块级元素 mar...

  • 页面布局:两列布局

    定宽与自适应 浮动 float + margin 简单的布局方法,左侧设置浮动,右侧设置margin-left(避...

  • 前端开发-常见CSS布局

    常见的两列布局 float浮动布局 flex布局 常见的三列布局 float浮动布局 position定位 fle...

  • 常见的布局实现

    本章主要介绍常见的布局实现,包括: [1] 两列布局 [2] 三列布局 [3] 弹性 (Flex) 布局 [1] ...

网友评论

      本文标题:两列布局

      本文链接:https://www.haomeiwen.com/subject/xxyuextx.html