同事去笔试遇到的问题

要求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. Centos7 minimal 安装npm

    最小版本缺少很多源,需要手动去添加源 如何去判断yum中 有没有 npm 的源呢 yum list | grep npm 如果是这样的,就代表需要自己去添加 curl -sL -o /etc/yum. ...

  2. k8s-yaml

    apiVersion: v1 #指定api版本,此值必须在kubectl apiversion中 kind: Pod #指定创建资源的角色/类型 metadata: #资源的元数据/属性 name: ...

  3. C# 遍历 enum 枚举

    foreach (Suit suit in (Suit[]) Enum.GetValues(typeof(Suit))) { } 注意:强制转换(Suit[])不是必需的,但确实使代码快0.5 ns.

  4. Pyspark 最近使用的一些有趣姿势的梳理

    之前对 SQL 还是不是非常熟悉的,但是现在或多或少还是会写一些计算任务.比如最近在推送将所有天级的耗时任务都从传统关系型数据库迁移至 Spark 集群当中进行计算,中间遇到一些有趣的小问题在这里记录 ...

  5. copy()函数技术推演

    /*** str_copy.c ***/ #include<stdio.h> void copy_str21(char *from, char *to) { for(; *from != ...

  6. selenium定位元素的方法

    1.id定位: find_element_by_id() 从上面定位到的搜索框属性中,有个id="kw"的属性,我们可以通过这个id定位到这个搜索框 代码: # coding = ...

  7. Java 使用Jedis和RedisTemplate操作Redis缓存（SpringBoot）

    package com.example.redis.controller; import com.example.redis.entity.User; import com.example.redis ...

  8. Echarts：实现拖拽效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  9. abp zero bug

    web host 项目中ChatController GetUploadedObject 使用:using (CurrentUnitOfWork.SetTenantId(null)) 图片刷新出错,改 ...

  10. 使用 concurrently 并行地运行多个命令（同时跑前端和后端的服务）

    我现在有一个项目是这样的,前端是用 React 写的,后端是用 Nodejs,目录结构如下: . ├── README.md ├── backend ├── node_modules ├── pack ...