css 等高布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试box-sizing</title>
<style>
    html, body, div {
        margin: 0;
        padding: 0;
    }

    #main {
        width: 100%;
        overflow: hidden;
    }
    #left {
        float: left;
        width: 10%;
        margin-bottom: -1000px;
        padding-bottom: 1000px;
        background: red;
    }
    #right {
        float: left;
        margin-bottom: -1000px;
        padding-bottom: 1000px;
        background: yellow;
    }

</style>
</head>
<body>
    <div id="main">
        <div id="left">
        dddddddddddddddddds</br>
        ssssssssssssss</br>
        ssssssssssssssss
        </div>
        <div id="right">ddddddddddsssssssssssssddddddddddsssssssssssssddddddddddsssssssssssssddddddddddsssssssssssss</div>
    </div>
</body>
</html>
时间: 2024-10-29 13:59:01

css 等高布局的相关文章

CSS等高布局的6种方式

目录 [1]边框模拟[2]负margin[3]table[4]absolute[5]flex[6]js 前面的话 等高布局是指子元素在父元素中高度相等的布局方式.等高布局的实现包括伪等高和真等高,伪等高只是看上去等高而已,真等高是实实在在的等高.本文将介绍边框模拟.负margin这两种伪等高以及table实现.absolute实现.flex实现和js判断这四种真等高布局 伪等高 边框模拟 因为元素边框和元素高度始终是相同高度,用元素的边框颜色来伪装左右两个兄弟元素的背景色.然后将左右两个透明背景

CSS等高布局

做一些后台项目,和一下带侧边栏项目的时候登高布局很常用,总结了下有几种 1.margin-bottom方法 这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法.核心的CSS代码如下(数值不固定): margin-bottom:-3000px; padding-bottom:3000px; 再配合父标签的overflow:hidden属性即可实现高度自动相等的效果. 举个简单的实例吧,如下CSS及HTML代码: #content{overflow:hidden;} .left{width:20

打好基础:浮动是怎么回事?怎么实现等高布局?CSS怎么控制文字换行?

一.浮动是怎么回事? 参考技术文章:CSS浮动的深入研究,以下为读书笔记. 浮动的原始意义 我们使用float浮动做了很多其本职工作以外的事情,于是我们会混淆,我们会回看不清float真正的面目.浮动真正的意义在哪里呢?要知道这个问题的答案很简单,假设现在CSS中没有浮动(float)属性,那么会变成一个什么样子.我们会发现,目前流行采用浮动方法实现的无论是分栏布局,还是列表排列我们都可以用其他一些CSS属性(不考虑table)代替实现,唯一一个实现不了的就是“文字环绕图片”,我是想不出来能有什

CSS布局——左定宽度右自适应宽度并且等高布局

今天有位朋友一早从妙味课堂转来一个有关于CSS布局的面试题,需要解决,花了点时间写了几个DEMO,放上来与大家分享受.那么我们在看DEMO之前一起先来看看这个面试题的具体要求吧: 左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到效果其实也并不是太难,只是给人感觉像有点蛋疼的问题一样.但是你仔细看后你会觉得不是那么回事: 左边固定,右边自适应布局,

纯css实现div三列等高布局的最简单方法简化版/也可以多列

使用正padding和负margin对冲实现多列布局方法 这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow:hiden把溢出背景切掉. html代码 <div id="wrap"> <div id="left"> <p> left</p> <p> left</p> <p> left</p>

两列等高布局 padding+margin的负值 CSS布局奇淫技巧之-多列等高

代码: 效果图: 路人甲:OK?等高了?? 路人丙:不是吧? 路人乙:你这是在逗我? xiaomogg: 效果有点惨,不过这的确是已经做了登高处理的 为什么"登高",看起来却不等高 请留意代码处红框处 padding-bottom:99px; margin-bottom:-99px; 路人甲:这说明不了什么问题!! 路人乙:快进入主题吧 路人丙:...................... xiaomogg: 其实"等高" 真的是不等高 1.如果把padding-b

CSS display:table属性用法- 轻松实现了三栏等高布局

display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以及其他现代浏览器都是支持此属性的,但是IE6/7只能对你说sorry了,这一事实也是大大制约了display:table-cell属性在实际项目中的应用,但是现在是移动端的天下了,ie 说拜拜吧~ 与其他一些display属性类似,table-cell同样会被其他一些CSS属性破坏,例如float, posi

CSS多列布局

1.多列等高布局 这种布局即每一列的高度保持一致,高度与最高的一列相同.等高布局是为了维护边框线条的完整性,在有些地方则可能是为了维护背景的完整性,达到整体一致不缺失的效果. 最常用的方法为padding补偿法: .container{ overflow:hidden; } .item{ float:left; width:100px; margin-right:10px; padding-bottom:10000px; margin-bottom:-10000px; } <div class=

多列居中等高布局

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS</title> <style type="text/css"> *{ margin:0; padding:0; font-size:12px;