美文网首页CSS
[CSS] 单列定宽的两列弹性布局

[CSS] 单列定宽的两列弹性布局

作者: 何幻 | 来源:发表于2016-03-07 07:17 被阅读36次

(1)使用float

<div class="use-float">
    <div></div>
    <div></div>
</div>
.use-float>div:first-child{
    width:100px;
    float:left;
}
.use-float>div:last-child{
    overflow:hidden;
}

(2)使用table

<table class="use-table">
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>
.use-table{
    border-collapse:collapse;
    width:100%;
}
.use-table>tbody>tr>td:first-child{
    width:100px;
}

(3)用div模拟table

<div class="use-mock-table">
    <div></div>
    <div></div>
</div>
.use-mock-table{
    display:table;
    width:100%;
}
.use-mock-table>div{
    display:table-cell;
}
.use-mock-table>div:first-child{
    width:100px;
}

(4)使用flex

<div class="use-flex">
    <div></div>
    <div></div>
</div>
.use-flex{
    display:flex;
}
.use-flex>div:first-child{
    flex:none;
    width:100px;
}
.use-flex>div:last-child{
    flex:1;
}

相关文章

  • [CSS] 单列定宽的两列弹性布局

    (1)使用float (2)使用table (3)用div模拟table (4)使用flex

  • 前端常见布局方式

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

  • CSS布局

    定宽+水平居中实现单列布局 定宽+水平居中实现单列布局(通栏) 代码:http://js.jirengu.com/...

  • 2018-03-19 css 实现左列定宽,右列自适应宽度,等高

    上次面试提到了一个css布局:实现左列定宽,右列自适应宽度,等高布局上次没有答出来,只实现了左列定宽,右列自适应宽...

  • CSS布局

    一列布局 一列水平居中 一列垂直居中 两列布局 左定宽右自适应 左自适应右定宽 三列布局 左右定宽中间自适应 左右...

  • css

    一:布局 浮动:做文字环绕效果 弹性盒:单行或单列布局 网格:多行多列布局 1、弹性盒 详细文档见MDN[http...

  • 前端学习笔记_css常见布局(1)

    一列布局-定宽 顾名思义定宽就是使用固定的宽度来布局,想要居中直接margin:0 auto;简单直接 css代码...

  • 网页基本布局

    网页常见的几种简单布局 单列布局 两列布局 三列布局 通栏布局 单列布局 效果图: top{ }/宽度980px,...

  • CSS 布局

    常见布局示意图 单列布局 定宽 水平居中 内部元素水平居中 第一列第2个例子(通栏) 第一列第5个例子 利用 in...

  • #06-2你认真学了css?布局套路

    一、两种布局使用分析 float布局(定宽布局) flex布局(弹性布局)image 二、原则 不到万不得已,不要...

网友评论

    本文标题:[CSS] 单列定宽的两列弹性布局

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