AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

CSS实战笔记(十) 自适应双栏布局

2023-04-25 70
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： CSS实战笔记(十) 自适应双栏布局

前言

1、通过 BFC 实现


<div class="wrap">
    <div class="left">
        <p>Hello World</p>
        <p>Good Night</p>
    </div>
    <div class="right">
        <p>Say Hello To Tomorrow</p>
        <p>Say Goodbye To Yesterday</p>
    </div>
</div>
.wrap {
    /* BFC */
    overflow: hidden;
    zoom: 1; /* compatible with IE6 */
}
.left {
    background-color: lightskyblue;
    /* float + margin */
    float: left;
    margin-right: 20px;
}
.right {
    background-color: deepskyblue;
    /* BFC */
    overflow: hidden;
    zoom: 1; /* compatible with IE6 */
}


2、通过 Flex 实现


<div class="wrap">
    <div class="left">
        <p>Hello World</p>
        <p>Good Night</p>
    </div>
    <div class="right">
        <p>Say Hello To Tomorrow</p>
        <p>Say Goodbye To Yesterday</p>
    </div>
</div>


.wrap {
    /* flex container */
    display: flex;
}
.left {
    background-color: lightskyblue;
    /* flex item */
    flex-grow: 0;
    /* margin */
    margin-right: 20px;
}
.right {
    background-color: deepskyblue;
    /* flex item */
    flex-grow: 1;
}


3、通过 Grid 实现


<div class="wrap">
    <div class="left">
        <p>Hello World</p>
        <p>Good Night</p>
    </div>
    <div class="right">
        <p>Say Hello To Tomorrow</p>
        <p>Say Goodbye To Yesterday</p>
    </div>
</div>
.wrap {
    /* grid container */
    display: grid;
    grid-template-columns: auto 1fr;
    grid-column-gap: 20px;
}
.left {
    background-color: lightskyblue;
}
.right {
    background-color: deepskyblue;
}
文章标签：
前端开发
关键词：
CSS布局
CSS实战
CSS笔记
CSS自适应
CSS自适应布局
半虹
目录
相关文章
石小石Orz
|
18天前
|
前端开发 安全 容器
CSS如何优雅实现卡片多行排列布局？
【8月更文挑战第24天】CSS如何优雅实现卡片多行排列布局？
石小石Orz
36 3
技术混子
|
19天前
|
前端开发 开发者 容器
探索现代Web开发中的CSS Grid布局技术
【8月更文挑战第29天】在数字时代的浪潮中，网页设计不断进化以适应日新月异的用户需求。CSS Grid布局技术作为一项革新性的前端工具，为设计师和开发者提供了前所未有的布局能力。本文旨在通过深入浅出的方式介绍CSS Grid的核心概念、基本用法以及在实际项目中的应用，帮助读者快速掌握这一强大的网页布局工具。
技术混子
39 3
土木林森
|
22天前
|
编解码 前端开发 开发者
【前端设计达人必备】揭秘CSS尺寸单位的魔力：从基础到实战，打造灵动响应式网页！
【8月更文挑战第26天】本文深入探讨了CSS中常用的尺寸单位，包括像素(px)、百分比(%)、视窗单位(vw/vh/vmin/vmax)、可伸缩相对单位(em/rem)以及Flexbox和Grid中的fr单位。通过具体案例展示了每种单位的特点及其适用场景。像素适用于固定尺寸元素；百分比和em/rem利于构建响应式布局；视窗单位适合全屏设计；fr单位则能有效管理复杂网格布局的空间分配。掌握这些单位有助于开发者设计出更加灵活、高质量的网页布局。
土木林森
35 4
土木林森
|
22天前
|
前端开发 开发者 容器
【Web布局的革命】探索CSS Grid栅格系统，打造未来网页设计！
【8月更文挑战第25天】在网页设计领域，布局至关重要。传统的布局方法难以满足复杂需求，CSS Grid 栅格系统因此诞生。它是一种二维布局模式，能直接控制行和列，简化复杂网格的设计。通过定义 `display: grid;` 创建网格容器，并利用 `grid-template-columns` 和 `grid-template-rows` 设置行列尺寸，轻松实现响应式布局。此外，CSS Grid 支持高级功能，如网格区域划分和对齐设置，极大提升了布局的灵活性和创意空间。随着浏览器兼容性的增强，CSS Grid 必将成为未来网页设计的关键技术之一。
土木林森
43 1
土木林森
|
1月前
|
前端开发 JavaScript Serverless
揭秘CSS布局神器：vw/vh、rem、%与px大PK，掌握它们，让你的网页设计秒变高大上，面试难题迎刃而解！
【8月更文挑战第4天】在Web开发中，合理选择CSS单位对响应式布局至关重要。本文探索viewport单位（vw/vh）、rem、百分比（%）及像素（px）的基础知识与应用场景。通过代码示例，展示如何运用这些单位实现全屏布局、尺寸比例调整、灵活的元素大小及固定尺寸。最后，模拟面试题，介绍如何仅用CSS实现一个元素的高度为其宽度两倍且响应视口变化的方法。
土木林森
128 8
白如意i
|
1月前
|
前端开发
CSS Grid 布局：span 关键字
CSS Grid 布局：span 关键字
白如意i
29 0
孙飞i
|
1月前
|
前端开发 JavaScript 开发者
理解CSS | 青训营笔记（3）
理解CSS | 青训营笔记（3）
孙飞i
24 0
孙飞i
|
1月前
|
机器学习/深度学习 编解码 前端开发
理解CSS | 青训营笔记（2）
理解CSS | 青训营笔记
孙飞i
26 0
孙飞i
|
1月前
|
前端开发 容器
理解CSS | 青训营笔记（1）
理解CSS | 青训营笔记
孙飞i
41 0
刘志辉~
|
1月前
|
前端开发 容器
css中弹性布局使用方法
css中弹性布局使用方法
刘志辉~
30 0

热门文章

最新文章

  • 1
    如何用 CSS 和 D3 创作一个抽象的黑白交叠动画
  • 2
    ASP.NET 2.0中CSS失效的问题总结(转)
  • 3
    详细认识一下CSS盒子模型
  • 4
    CSS代码记录
  • 5
    12款精美的免费 CSS 网页模板下载
  • 6
    细节决定成败——无CSS时网页的可读性
  • 7
    CSS好看的按钮
  • 8
    jQuery和CSS3打造的3D炫酷特效
  • 9
    CSS3自定义发光radiobox单选框
  • 10
    分享50个 CSS3 最佳应用示例
  • 1
    CSS背景
    44
  • 2
    CSS id 和 class
    39
  • 3
    CSS 语法
    45
  • 4
    【专栏：HTML与CSS前端技术趋势篇】HTML与CSS在PWA（Progressive Web Apps）中的应用
    83
  • 5
    【专栏：HTML与CSS前端技术趋势篇】前端框架（React/Vue/Angular）与HTML/CSS的结合使用
    82
  • 6
    【专栏：HTML 与 CSS 前端技术趋势篇】Web 性能优化：CSS 与 HTML 的未来趋势
    76
  • 7
    【专栏：HTML与CSS前端技术趋势篇】渐进式增强与优雅降级在前端开发中的实践
    89
  • 8
    【专栏：HTML与CSS前端技术趋势篇】网页设计中的CSS Grid与Flexbox之争
    69
  • 9
    【专栏：HTML 与 CSS 前端技术趋势篇】HTML 与 CSS 在 Web 组件化中的应用
    70
  • 10
    【专栏：HTML与CSS实战项目篇】创建一个具有复杂布局的电商详情页
    71

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 《优酷响应式布局技术全解析》
  • 低代码开发师（初级）实战教程

    • 相关实验场景

    更多
  • CSS基础教程
  • 前端开发基础3：CSS3常见显示属性
  • 图表样式智能美化工具
    • 下一篇
    基于LNMP搭建WordPress