同事去笔试遇到的问题

要求3列div根据内容的变化通过css实现等高

效果图：

原理：

同列的div设置一个父级 overflow:hidden 超出部分隐藏

给同列的div设置css margin-bottom:-10000px; padding-bottom:10000px;

 <HTML>

 <HEAD>

 <TITLE>网页布局 CSS实现DIV并列等高</TITLE>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 <style type="text/css">

     #content{ width:900px;overflow:hidden;margin: 0 auto;}

     #content div.con{margin-bottom:-10000px; padding-bottom:10000px;background-color: green;width: 290px;float: left;margin-right: 10px;color: #fff;}

 </style>

 </head>

 <BODY>

 <div id="content">

     <div class="con">

        div1<br>

        div1<br>

        div1<br>

        div1<br>

        div1<br>

        div1<br>

     </div>

     <div class="con">div2 </div>

    <div class="con">div3</div>

 </div>

 </BODY>

 </HTML>

网页布局 CSS实现DIV并列等高的更多相关文章

  1. css实现div不定宽高垂直水平居中解决方案

    在项目中我们经常能碰见然图片垂直水平居中,不定宽高的div垂直水平居中,等等~~ 现在我将介绍我所知道的几种用css来解决的几种方案. 1.父元素text-align:center;display:t ...

  2. Web设计之网页布局CSS技巧

    1.两列布局 1.1.左列固定,右列自适应 #left{    width:190px; float:left; } #right{    margin-left:205px; } 1.2.右列固定, ...

  3. H5网页布局+css代码美化

    HTML5的结构化标签,对搜索引擎更友好 li 标签对不利于搜索引擎的收录,尽量少用 banner图片一般拥有版权,不需要搜索引擎收录,因此可以使用ul + li <samp></s ...

  4. [CSS属性设置，盒子模型，网页布局]

    [CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...

  5. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

  6. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  7. [转]CSS网页布局：div水平居中的各种方法

    http://jingyan.baidu.com/article/fa4125ac90a2a328ac70929e.html 在Web标准中的页面布局是使用Div配合CSS来实现的.这其中最常用到的就 ...

  8. DIV+CSS 网页布局之：混合布局

    1.混合布局 在了解了一列.两列和三列布局之后,混合布局也就不难理解了,混合布局也可以叫综合型布局,那么混合布局就可以在一列布局的基础之上,分为两列布局,三列布局,网页布局的结构普遍都是三列布局,但是 ...

  9. DIV+CSS 网页布局之：一列布局

    1.网页布局 布局(layout)即对事物的全面规划和安排,页面布局是对页面的文字.图像或表格进行格式化版式排列.网页布局对改善网站的外观非常重要,又称版式布局,大多数网站会把内容安排到多个列中,就像 ...

随机推荐

  1. SIGAI机器学习第二十一集 AdaBoost算法2

    讲授Boosting算法的原理,AdaBoost算法的基本概念,训练算法,与随机森林的比较,训练误差分析,广义加法模型,指数损失函数,训练算法的推导,弱分类器的选择,样本权重削减,实际应用. 大纲: ...

  2. MySQL Create table as / Create table like

    a.create table like方式会完整地克隆表结构,但不会插入数据,需要单独使用insert into或load data方式加载数据 b.create table as  方式会部分克隆表 ...

  3. admin站点管理

    admin中的显示 class Saltstack_GroupAdmin(admin.ModelAdmin): list_display = ['group_name','salt_minion_id ...

  4. HTML5自定义属性操作

    一.自定义属性(html5标准)data-属性名称="属性值" 自定义属性的名称驼峰式命名规则需要用-隔开 自定义属性名称如果连在一起写,大写会自动转为小写 data-user=& ...

  5. TCP采用四次挥手关闭连接如图所示为什么建立连接协议是三次握手，而关闭连接却是四次握手呢？

    tcp四次挥手,由于TCP连接是全双工的,因此每个方向都必须单独进行关闭. 由于TCP连接是全双工的,因此每个方向都必须单独进行关闭.这个原则是当一方完成它的数据发送任务后就能发送一个FIN来终止这个 ...

  6. BAT 删除超过xx天的文件

    @echo offecho 删除n天前的备分文件和日志forfiles /p "C:\ShareF" /m *.zip /d -7 /c "cmd /c del @pat ...

  7. Xshell远程连接服务器

    Xshell远程连接服务器 打开xshell后找到左上角第一个“文件”点击,弹出来一个下拉框,选择“新建”点击(或者直接按下快捷键“Alt+n”).         点击“新建”之后就会出现下面这样一 ...

  8. Nginx服务配置文件介绍

    LNMP架构应用实战——Nginx服务配置文件介绍 nginx的配置文件比较简单,但功能相当强大,可以自由灵活的进行相关配置,因此,还是了解下其配置文件的一此信息 1.Nginx服务目录结构介绍 安装 ...

  9. macOS 系统下载地址

    macOS Catalina macOS Mojave macOS High Sierra macOS Sierra 点击可以直接在MAC App Store下载,如果不能下载就多试几次.

  10. 去掉iframe周围的空白

      今天,在处理一个网页样式时,遇到了一小问题,就是调用的iframe四周出现了空白. iframe调用的代码如下: 示例: <iframe src="http://www.xxx.c ...