`
xylong
  • 浏览: 190835 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

css布局多列等高且高度自适应

阅读更多
<div class="container">
    <div class="col col-a">
        <p>In the beginning God created the heavens and the earth.</p>
    </div>
    <div class="col col-b">
        <h2>The Book of John</h2>
        <p>In the beginning was the Word, and the Word was with God, and the Word was God.</p>
    </div>    
    <div class="col col-c">
        <h2>The Book of Genesis</h2>
        <p>In the beginning God created the heavens and the earth.</p>
        <p>Now the earth was formless and empty, darkness was over the surface of the deep, and the Spirit of God was hovering over the waters.</p>
    </div>
</div>

 

.container{
    zoom:1; /* for IE6 */
    overflow:hidden;
}
.col{
    float:left; 
    padding-bottom:3000px;
    margin-bottom:-3000px; 
}
.col-a{ 
    width:240px;
    background:#FDFD97;
}
.col-b{
    width:280px;
    background:lightgreen;
}
.col-c{
    width:320px;
    background:#E0DCDC;
}

   这个布局技巧的原理是:我们设置每一列的padding-bottom足够大(根据盒模型,背景色存在于padding上),但这撑大了外层容器的高度,接着我们通过设置列的margin-bottom为负值(绝对值与padding-bottom相等),并且外层容器的overflow为hidden,使容器高度回到原有值,它截断了每一列,这看起来就是我们想要的效果。

 

 

分享到:
评论

相关推荐

    多列等高的CSS实现.rar

    在网页设计中,多列等高布局是一种常见的需求,它要求网页中的多个列即使内容不同,高度也能够保持一致,从而使得视觉效果更加统一和整洁。"多列等高的CSS实现"是一个重要的技术主题,特别是在响应式设计和网格系统...

    等高布局

    这种布局方式通常用于创建网格系统、侧边栏与主要内容区域的对齐,或者在响应式设计中保证多列内容的高度统一。下面我们将详细探讨等高布局的几种实现方法以及相关知识点。 1. **CSS Flexbox布局**: CSS Flexible...

    脚本控制三行三列自适应高度DIV布局

    在Web开发过程中,实现多列等高布局是一项常见的需求,尤其是在处理动态内容时。传统的CSS布局方法(如使用背景图、外包层或者通过右栏覆盖左栏的方式)虽然能够达到一定的效果,但在灵活性和维护性上存在一定的局限...

    利用CSS3的flexbox实现水平垂直居中与三列等高布局

    因为对于三列等高自适应布局和水平垂直居中对齐需要一些对css3中flexbox基础概念的理解,所以会对flexbox的概念做一个简单的介绍,以为后面的实例做一个铺垫。本人一直认为,不管学习任何知识,对于概念的理解都十分...

    用css网站布局之十步实录

    浮动常用于创建多列布局,但需注意清除浮动,避免父元素高度塌陷。可以使用`clear:both`或伪元素如`::after`来清除浮动。 第五步:定位 理解相对定位、绝对定位和固定定位的区别。相对定位相对于元素本身移动,绝对...

    DivCSS.rar_ divcss_divcss

    1. 浮动布局:通过设置float属性,可以让Div元素浮动,常用于创建多列布局。 2. 定位布局:利用position属性(static, relative, absolute, fixed),可以实现元素的精确定位。 3. Flex布局:现代浏览器支持的...

    CSS实现页面两列布局与三列布局的方法示例

    本文将详细讲解如何使用CSS实现两列布局和三列布局,以及如何实现宽度和高度的自适应。 首先,我们来看一种基于BFC(块格式化上下文,Block Formatting Context)原理的三列布局方法。BFC是一个独立的渲染区域,它...

    图片展示等高DEMO

    在IT行业中,图片展示等高(Equal Height Images)是一种常见的网页设计技巧,目的是在布局中保持多张图片的顶部对齐,使视觉效果更加整洁、统一。这种技术尤其适用于网格布局,例如产品展示、博客文章预览或者画廊...

    精通CSS+DIV网页样式与布局

    2. 浮动:float属性(left、right、none)可以使元素向左或向右浮动,常用于创建多列布局。 3. 弹性盒模型(Flexbox):提供了一种更为灵活的布局方式,可以轻松实现等宽、等高、自适应等布局效果。 4. 网格布局...

    css+div样式 源码

    - 流动布局(Float Layout):利用float属性使元素浮动,从而实现多列并排布局,适用于传统的固定宽度布局。 - 定位布局(Positioning):使用position属性(static, relative, absolute, fixed),可以精确控制...

    web前端开发常用布局demo

    CSS多列布局模块允许创建报纸般的多列内容,适应不同的屏幕宽度。 这些布局技术都是现代Web开发中的基础,理解和掌握它们能帮助开发者创建出更加灵活、响应式的网页。通过学习和实践“web前端开发常用布局demo”中...

    DIV+CSS教程

    3. Flex布局:CSS3引入的Flexbox(弹性盒模型)提供了一种更现代的布局方式,能轻松实现等宽、等高、自适应等效果,简化了传统布局的复杂性。 4. Grid布局:CSS Grid(网格布局)进一步增强了布局能力,允许创建二...

    仿Pinterest网格瀑布流响应式布局代码

    瀑布流布局是一种非传统的一列或多列布局方式,它不按照等宽或等高的规则来排列元素,而是允许元素根据其内容或浏览器窗口的宽度动态调整大小和位置。这种布局方式在图片展示网站和社交媒体平台中非常流行,因为它...

    EqualizeCSS基于flexboxes带网格的css框架

    大多数现代浏览器都支持Flexbox,但为了确保老版本浏览器的兼容性,开发者可能需要引入polyfill库或者使用传统CSS布局作为备用方案。 6. **使用与集成** 要使用EqualizeCSS,你需要在项目中引入框架的CSS文件,并...

    css布局实例:网页布局的方法

    许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个容器的内容,就象经典表格布局中的单元格控制几个栏目的位置,也喜欢容器的内容居中或顶部对齐显示。  但是你又不喜欢用table来实现他,...

Global site tag (gtag.js) - Google Analytics