同事去笔试遇到的问题

要求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. printf的使用

    #!/bin/bashprintf "|------------------------------------\n"printf "this is printf str ...

  2. LibreOJ #525. 「LibreOJ β Round #4」多项式

    二次联通门 : LibreOJ #525. 「LibreOJ β Round #4」多项式 官方题解 : /* LibreOJ #525. 「LibreOJ β Round #4」多项式 由于会有多种 ...

  3. CF1163E Magical Permutation【线性基，构造】

    题目描述:输入一个大小为\(n\)的正整数集合\(S\),求最大的\(x\),使得能构造一个\(0\)到\(2^x-1\)的排列\(p\),满足\(p_i\oplus p_{i+1}\in S\) 数 ...

  4. 《挑战30天C++入门极限》C++运算符重载函数基础及其值返回状态

        C++运算符重载函数基础及其值返回状态 运算符重载是C++的重要组成部分,它可以让程序更加的简单易懂,简单的运算符使用可以使复杂函数的理解更直观. 对于普通对象来说我们很自然的会频繁使用算数运 ...

  5. 请解释或描述一下Django的架构

    对于Django框架遵循MVC设计,并且有一个专有名词:MVT M全拼为Model,与MVC中的M功能相同,负责数据处理,内嵌了ORM框架 V全拼为View,与MVC中的C功能相同,接收HttpReq ...

  6. note_4.10

    单位根反演 \[ \frac{1}{k}\sum_{i=0}^{k-1}\omega_k^{in}=[k|n] \] 所以 \[ \begin{equation} \begin{split} \sum ...

  7. 怎么样在vue-cli的项目里面引入element ui

    第一步:先进入到项目里面 npm i element-ui -S 第二步: import Vue from 'vue'; import ElementUI from 'element-ui'; //这 ...

  8. nginx代理mysql

    实验环境: 两台编译安装的mysql                            一台编译安装的nginx 192.168.3.1                               ...

  9. 记录vsCode配置node开发环境

    环境:win10,idea:vscode 1:安装Visual Studio Code 下一步下一步.(很早之前就安装了). 2:安装node. http://nodejs.cn/download/  ...

  10. ubuntu系统五笔输入法安装

    转载:https://jingyan.baidu.com/article/454316ab67d702f7a7c03a1a.html Ubuntu 16.04 在安装时选择中文安装,安装过程中将自动安 ...