正文 

当前位置： 首页 > IT > java教程

css等高柱(代码片段)

author author     2023-01-27     701

关键词： 

// HTML

<div class="equal">
	<div class="row">
		<div class="one">

			<h2>This is a box</h2>
			<p>This box has less content than the one next to it, but both boxes will still have equal height. No background-image trickery.</p>
		</div>
		<div class="two">
        	<h2>This is another box</h2>
			<p>This box has more content than the others. If all boxes were table cells, the cell with the most content would decide the height of all cells. It works like that here too, but this is not a table.</p>
			<p>Instead, display:table, display:table-row and display:table-cell are used to make divs behave like table cells. Excellent. Too bad it doesn’t work in you-know-which-browser. It does, however, work in modern browsers like Mozilla, Opera, Safari, Firefox, OmniWeb, Camino, and Netscape.</p>

			<p>Read the related blog entry for more info: <a href="/archive/200405/equal_height_boxes_with_css/">Equal height boxes with CSS</a>.</p>
		</div>
		<div class="three">
			<p>This box has even less content. Anything in it is vertically centered.</p>
		</div>
	</div>
</div>


// CSS

/* Layout rules */
	.equal 
		display:table;
		border-collapse:separate;
	
	.row 
		display:table-row;
	
	.row div 
		display:table-cell;
	
	
	/* Styling rules to make the example look nicer */
	html,body 
		margin:0;
		padding:0;
		color:#000;
		background:#fff;
	
	body 
		font:76%/140% "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
	
	.equal 
		margin:10px auto;
		border-spacing:10px;
		background:#898B60;
		width:80%;
	
	.row div 
		background:#fff;
	
	.row div.one 
		width:40%;
	
	.row div.two 
		width:40%;
	
	.row div.three 
		vertical-align:middle;
	
	.row div h2 
		margin:0 0 0.5em 0;
		padding:0.5em 10px;
		font-size:1.2em;
		color:#fff;
		background:#595B30;
	
	.row div p 
		font-size:0.94em;
		margin:0.5em 0;
		padding:0 10px;
	
	#labfooter 
		text-align:center;

htmlbootstrap等高柱(代码片段)

查看详情

csscss：等高柱(代码片段)

查看详情

javascript坚如磐石的等高柱(代码片段)

查看详情

css弹性柱(代码片段)

查看详情

css弹性柱(代码片段)

查看详情

css弹性柱(代码片段)

查看详情

css等高引导列(代码片段)

查看详情

等高柱

functionequalHeight(group)tallest=0;group.each(function()thisHeight=$(this).height();if(thisHeight>tallest)tallest=thisHeight;);group.height(tallest); 查看详情

css等高文本字段和按钮(代码片段)

查看详情

等高柱

$.fn.equalizeHeights=function(){returnthis.height(Math.max.apply(this,$(this).map(function(i,e){return$(e).height()}).get()))} 查看详情

css反向柱påmobil(代码片段)

查看详情

css2柱，液体，右轨，轨道最高(代码片段)

查看详情

等高柱

//EQUALHEIGHTCOLUMNS/** *@description SimpleEqualColumns *@author MattHobbsmodifiedbyMattLawson *@version 0.02 */jQuery.fn.equalCols=function(){ //ArraySorter varsortNumber=function(a,b){returnb-a;}; varheights=[]; //Pusheachheightintoanarra... 查看详情

坚固的等高柱

Dynamicequalheightcolumnsthataccountforpaddingandborders.//DynamicEqualHeightColumns*PureJSfunctioneqHeight(parent_id){ varchild=document.getElementById(parent_id).childNodes,childAmount=child.length,boxHeight=0;//Findthegreatestheight for(vari=childAmount-1;i>=0;i--)... 查看详情

css实现内容不相同的左右两个div等高(代码片段)

...两个div的内容不相同，如何设置两个div的css做到在两个div等高排列呢？下面是网上找的3种实现方法，觉得很有代表性，所以索性收藏起来。方法一通过父元素设置overflow:hidden,div自己设置padding-bottom和margin-bottom来实现。<divid=&qu... 查看详情

等高柱

//HTML <divclass="equal"> <divclass="row"> <divclass="one">  <h2>Thisisabox</h2> <p>Thisboxhaslesscontentthantheonenexttoit,butbothboxeswillstillhaveequalheight.Nobackground-imagetrickery.</p> </div> <d... 查看详情

div实现两列等高(代码片段)

参考代码如下<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>两列等高</title><styletype="text/css">html,bodywidth:100%;height:100%;*margin 查看详情

javascript柱(代码片段)

查看详情