同事去笔试遇到的问题

要求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. ES 调优查询亿级数据毫秒级返回！怎么做到的？--文件系统缓存

    一道面试题的引入: 如果面试的时候碰到这样一个面试题:ElasticSearch(以下简称ES) 在数据量很大的情况下(数十亿级别)如何提高查询效率? 这个问题说白了,就是看你有没有实际用过 ES,因 ...

  2. web实现大文件上传分片上传断点续传

    需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是 ...

  3. 1-STM32+W5500+GPRS物联网开发基础篇-工控板简介

    最近这些日子都在忙活STM+W5500+GPRS的板子,所以前面的那块板子的教程耽搁了些时间. 这次的板子和上一版相比更贴近了使用,是因为有朋友督促我要做一块直接可以在工厂使用的板子,所以设计了这一块 ...

  4. ELK教程1：ElasticSearch集群的部署ELK

    在分布式系统中,应用数量众多,应用调用链复杂,常常使用ELK作为日志收集.分析和展示的组件.本篇文章将讲讲解如何部署ELK,然后讲解如何使用Filebeat采集Spring Boot的日志输出到Log ...

  5. 备用shell管理方案之butterfly+nginx+https

    安装butterfly+nginx https 1. 安装butterfly yum install python36 python36-pip python36-devel -y pip insta ...

  6. Pytest权威教程14-缓存:使用跨执行状态

    目录 缓存:使用跨执行状态 使用方法 首先只重新运行故障或故障 上次运行中没有测试失败时的行为 新的config.cache对象 检查缓存内容 清除缓存内容 逐步修复失败用例 unittest.Tes ...

  7. 02_01Graph_Session

    import numpy as npimport tensorflow as tfnp.random.seed(42)"""学习:1.图的创建2.tf.constant( ...

  8. openwrt共享打印机需要安装哪几个文件

    opkg updateopkg install luci-app-p910ndopkg install kmod-usb-printer

  9. 【转】禁用chrome firefox 的 WebRTC功能防止真实IP泄漏

    无论是使用VPN还是其它代理方式,很多时候我们不希望暴露自己的真实IP,且一直以来我们认为VPN是安全的,所有流量都会走VPN. 但最近暴露出一个WebRTC特性,会暴露我们的真实IP.适用浏览器:c ...

  10. nginx基础模块

    http://www.nginx.cn/doc/ 基础模块 HTTP Core模块* HTTP Upstream 模块 HTTP Access 模块 HTTP Auth Basic 模块 HTTP A ...