css控制父元素下的子元素自适应高度，且高度一致

css代码：

.wrap{width:600px;margin:0 auto; overflow:hidden;}

.left{background:#ccc;width:300px;float:left;margin-bottom:-10000px;padding-bottom:10000px;}

.right{background:#eee;width:300px;float:left;margin-bottom:-10000px;padding-bottom:10000px;}

html 代码：<div class="wrap"><div class="left">左侧</div>< div class="right">右侧<br />右侧<br />右侧<br />右侧< /div></div>

说明：通过控制margin-bottom:-10000px;padding-bottom:10000px;这个样式，达到左右高度一致，实际上两边的高度在10000px范围内都可以保持一致，可以设置更高。

时间： 2024-10-05 10:16:02

css控制父元素下的子元素自适应高度，且高度一致的相关文章

bobo jquery获取当前元素下的子元素的子元素

<div class="Bg01"><ul><li class="Bold">黑域名告警</li><li>总数:<span class="Mycolor">24条</span></li><li>未处理:<span class="Myred">03条</span></li></ul

CSS的经典问题一:父元素下第一个子元素的margin-top越界问题以及末个子元素margin-bottom的越界问题? 1. 为父元素加边框,防止子元素延伸.副作用是边框:2. 将margin换做padding:副作用是padding-top的值要加padding:3. 父元素overflow,副作用是将溢出部分隐藏掉可能不满足需求:4. 将父元素的第一个元素之前加一个无高度的table元素,无副作用!!! .parent:before{ content:' '; display:table

stylus选中hover元素的兄弟元素下的子元素

stylus设置兄弟元素样式:鼠标浮动在 .video-li 元素上时,.video-li 兄弟中 .video-info 下的 .word 显示. .video-li &:hover ~ .video-info .word visibility visible 设置 h1 兄弟元素中,class 为 p1 的元素样式: <!DOCTYPE HTML> <html> <head> <style type="text/css"> h

如何使父元素透明，子元素不透明

以下内容转自:http://www.wfuns.com/?p=142 当我们在使用opactity 属性给DIV设置半透明度的时候,DIV下的子元素(标签和文字)都会继承父元素的透明度属性,并且无论我们重置子元素的透明度属性情况都不会发生变化,而这往往不是我们想要看到的效果. 代码设置如下: //样式 <style type=”text/css”> .father{height:400px;filter:alpha(opacity=90);-moz-opacity:0.9; -khtml-op

AngularJs中，如何在父元素中调用子元素为自定义Directive中定义的函数？

最近一段时间准备使用AngularJs中的自定义Directive重构一下代码. 在这里说明一下,把自定义控件封装成Directive并不一定是要复用,而是要让代码结构更加清晰.就好像你将一个长方法拆分成多个独立的小方法,也未必要复用它们一样.职责独立等一票好处,会让后期维护更加轻松. 在重构的过程中,我遇到了这样一个问题,先上图: 图一: 这就是我要重构的界面,由于之前时间紧,将这三个Filter和两个button都写在了一个页面中.当时我已经预感到,如果将这里面的状态都写到一个scope上,

指定的元素已经是另一个元素的逻辑子元素。请先将其断开连接。(解决问题总结)

起因: <Window x:Class="WpfApplication1.Window3" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window3" Height="300" Width=

jquery怎样获取一个元素下面相同子元素的个数

例如下面的html代码,要获取P元素下面a元素的个数: <p id="father"> <a></a> <a></a> <a></a> <a></a> <a></a> -- <a></a> </p> 我们可以这样写: $("#father a").length jquery怎样获取一个元素下面相同子元

原生javascript实现获取指定元素下所有后代元素代码实例

原生javascript实现获取指定元素下所有后代元素代码实例:在本版块介绍过实现此功能的代码代码,但是在代码量上比较麻烦,采用的是循环递归的方式.上面你所说的方式可以参阅原生的javascript获取指定元素下所有的元素节点一章节,此文介绍的看起来非常的麻烦,那么下面就分享一个比较简单的方式,使用原生的javascript方法即可实现此功能.代码实例如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=&

css基础 :hover 鼠标放在父元素上，子元素变色

礼悟: 公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体. 虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜. ide:visual studio 2017 browser:Chrome os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu