Javascript 在分区的最后一行上平铺等高分区
大家好，有没有办法实现以下设计？ 我为我的div做了一个设计，但我不知道如何做到这样。div位于页面的中心，所有这些div的包装宽度都可以调整 正常含量 当包装器变小时，它将是一个两列div，最后一列仍然相等。 *包装器div在放大和缩小时调整其宽度 代码Javascript 在分区的最后一行上平铺等高分区,javascript,jquery,html,css,Javascript,Jquery,Html,Css,大家好，有没有办法实现以下设计？ 我为我的div做了一个设计，但我不知道如何做到这样。div位于页面的中心，所有这些div的包装宽度都可以调整 正常含量 当包装器变小时，它将是一个两列div，最后一列仍然相等。 *包装器div在放大和缩小时调整其宽度 代码 html，正文{ 填充：0； 保证金：0； 最小宽度：820px； 颜色：#333333； 背景色：#f1f1； 字体系列：Arial、Helvetica、无衬线字体； 字体风格：普通； 字体大小：正常； 字体大小：13px； } a
html，正文{
填充：0；
保证金：0；
最小宽度：820px；
颜色：#333333；
背景色：#f1f1；
字体系列：Arial、Helvetica、无衬线字体；
字体风格：普通；
字体大小：正常；
字体大小：13px；
}
a{
文字装饰：无；
颜色：#3EA7bb；
光标：指针；
}
保险商实验室{
显示：内联块；
位置：相对位置；
}
人力资源{
边框：1px实心#f1f1；
}
.清除
{
显示：块；
明确：两者皆有；
浮动：无；
保证金：0；
填充：0；
边界：无；
字号：0；
身高：0；
溢出：隐藏；
}
.重置框
{
溢出：隐藏；
显示：表格；
}
#主容器{
宽度：80%；
最小高度：100%；
最小宽度：820px；
最大宽度：1000px；
z指数：0；
左：0；
排名：0；
游标：默认值；
溢出：隐藏；
背景色：#FFFFFF；
位置：相对位置；
保证金：0自动；
左侧填充：20px；
右边填充：20px；
-莫兹盒阴影：0 5px#333333；
-网络工具包盒阴影：0 5px#333333；
盒影：0 0 5px#333；
}
#标题{
高度：100px；
垫面：5px；
保证金：0自动；
}
#标题标志{
宽度：308px；
高度：100px；
背景图像：url（../images/skerp.png）；
背景位置：中心；
背景重复：无重复；
左边距：20px；
}
#菜单栏{
保证金：0自动；
最小高度：25px；
z指数：100；
边际上限：0；
页边距底部：0；
边界半径：0px；
/*-moz盒阴影：0 3px#333333；
-网络工具包盒阴影：0 3px#333333；
盒影：0 0 3px#333333*/
-moz盒阴影：0 3px 3px rgba（0,0,0,0.2）；
-webkit盒阴影：0 3px 3px rgba（0,0,0,0.2）；
长方体阴影：0 3px 3px rgba（0,0,0,0.2）；
保证金：0自动；
}
#菜单包装器{
显示：内联块；
浮动：对；
右边距：10px；
}
.menu元素{
最小宽度：75px；
高度：25px；
显示：内联块；
光标：指针；
文本对齐：居中；
}
#车身容器{
保证金：0自动；
填充底部：90px；
}
.左容器、.右容器、.中心容器{
显示：块；
浮动：左；
}
.特色{
保证金：20px自动；
填充物：5px；
-莫兹盒阴影：0 5px#333333；
-网络工具包盒阴影：0 5px#333333；
盒影：0 0 5px#333；
边界半径：5px；
最小高度：300px；
宽度：780px；
}
左边
{
文本对齐：左对齐；
}
.左跨{
浮动：左；
左：0；
}
.对
{
文本对齐：右对齐；
}
.右跨{
右：0；
浮动：对；
}
.主色调{
宽度：300px；
高度：5px；
显示：块；
}
.sub颜色{
宽度：100px；
高度：5px；
显示：块；
}
.内容包装器{
利润率：10px自动；
最小宽度：810px；
/*填充：10px；*/
}
.内容包装器h1{
文本对齐：左对齐；
}
.图像包装器{
保证金：0自动；
}
.页面标题{
填充：20px 10px 10px 10px；
显示：块；
}
.页面标题h1{
字体大小：粗体；
字体大小：40px；
文本缩进：20px；
}
.内容标题h1{
字体大小：粗体；
字体大小：20px；
}
.content{
填充：0px；/*15px 15px 15px*/
显示：块；
字体大小：15px；
}
.内容p{
文本对齐：对齐；
线高：25px；
字距：1px；
单词包装：打断单词；
}
.边界{
-moz盒阴影：0 5px#999999；
-webkit盒阴影：0 5px#999999；
盒影：0 0 5px#999999；
边界半径：5px；
边框：1px实心#999999；
}
.边框顶部{
边框顶部：1px实心#999999；
}
.左边界{
左边框：1px实心#999999；
}
.边界权{
右边框：1px实心#999999；
}
.边框底部{
边框底部：1px实心#999999；
}
.列包装器{
填充顶部：20px；
文本对齐：居中；
垂直对齐：中间对齐；
宽度：100%；
}
.column wrapper div{
显示：内联表；
保证金：2倍；
}
.小柱{
填充：10px；
填充底部：30px；
宽度：30%；
最小宽度：250px；
位置：相对位置；
}
.FixedBoottomReadmore{
位置：绝对位置；
底部：10px；
右：20px；
}
.fluedbottomReadMore{
位置：绝对位置；
浮动：对；
右：20px；
}
.小柱ul{
利润上限：-10px；
宽度：100%；
最大宽度：240px；
}
.李小柱{
文本对齐：左对齐；
}
.column small li{
列表样式：无；
填充物：5px；
文本缩进：-30px；
单词包装：打断单词；
}
.柱状培养基{
填充：10px；
宽度：61%；
最小宽度：505px；
}
.大柱{
填充：10px；
宽度：100%；
最小宽度：760像素；
}
特征
- 代码阻塞
- 代码包装
- 代码清除
- 代码睡眠
模块
- 在房子周围吠叫
- 爱
<html>
<head>
<title></title>
<link rel="stylesheet" href="view/css/ui-layout.css" type="text/css"/>
<link rel="stylesheet" href="view/css/layout.css" type="text/css"/>
<script type="text/javascript" src="view/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="view/js/equalheight.js"></script>
<style>
html,body{
padding: 0;
margin:0;
min-width: 820px;
color: #333333;
background-color: #F1F1f1;
font-family: Arial, Helvetica, Sans-Serif;
font-style: normal;
font-weight: normal;
font-size: 13px;
}
a{
text-decoration:none;
color:#3EA7bb;
cursor: pointer;
}
ul{
display: inline-block;
position: relative;
}
hr{
border:1px solid #f1f1f1;
}
.cleared
{
display:block;
clear: both;
float: none;
margin: 0;
padding: 0;
border: none;
font-size: 0;
height:0;
overflow:hidden;
}
.reset-box
{
overflow:hidden;
display:table;
}
#main-container{
width: 80%;
min-height: 100%;
min-width: 820px;
max-width: 1000px;
z-index: 0;
left: 0;
top: 0;
cursor:default;
overflow:hidden;
background-color:#FFFFFF;
position: relative;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
-moz-box-shadow: 0 0 0 5px #333333;
-webkit-box-shadow: 0 0 0 5px #333333;
box-shadow: 0 0 5px #333333;
}
#header{
height: 100px;
padding-top: 5px;
margin:0 auto;
}
#header-logo{
width: 308px;
height: 100px;
background-image: url(../images/skerp.png);
background-position: center;
background-repeat: no-repeat;
margin-left: 20px;
}
#menu-bar{
margin:0 auto;
min-height: 25px;
z-index: 100;
margin-top: 0;
margin-bottom: 0;
border-radius:0px;
/*-moz-box-shadow: 0 0 0 3px #333333;
-webkit-box-shadow: 0 0 0 3px #333333;
box-shadow: 0 0 3px #333333;*/
-moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
margin:0 auto;
}
#menu-wraper{
display: inline-block;
float: right;
margin-right: 10px;
}
.menu-element{
min-width: 75px;
height: 25px;
display:inline-block;
cursor: pointer;
text-align:center;
}
#body-container{
margin:0 auto;
padding-bottom: 90px;
}
.left-container,.right-container,.center-container{
display: block;
float:left;
}
.featured{
margin:20px auto;
padding:5px;
-moz-box-shadow: 0 0 0 5px #333333;
-webkit-box-shadow: 0 0 0 5px #333333;
box-shadow: 0 0 5px #333333;
border-radius: 5px;
min-height: 300px;
width: 780px;
}
.left
{
text-align: left;
}
.left span{
float:left;
left:0;
}
.right
{
text-align: right;
}
.right span{
right:0;
float:right;
}
.main-under-color{
width: 300px;
height:5px;
display: block;
}
.sub-under-color{
width: 100px;
height:5px;
display: block;
}
.content-wrapper{
margin:10px auto;
min-width: 810px;
/*padding:10px;*/
}
.content-wrapper h1{
text-align: left;
}
.image-wrapper{
margin: 0 auto;
}
.page-title{
padding: 20px 10px 10px 10px;
display: block;
}
.page-title h1{
font-weight: bold;
font-size: 40px;
text-indent: 20px;
}
.content-title h1{
font-weight: bold;
font-size: 20px;
}
.content{
padding:0px;/* 15px 15px 15px;*/
display: block;
font-size: 15px;
}
.content p{
text-align: justify;
line-height: 25px;
word-spacing: 1px;
word-wrap:break-word;
}
.border{
-moz-box-shadow: 0 0 0 5px #999999;
-webkit-box-shadow: 0 0 0 5px #999999;
box-shadow: 0 0 5px #999999;
border-radius: 5px;
border:1px solid #999999;
}
.border-top{
border-top:1px solid #999999;
}
.border-left{
border-left:1px solid #999999;
}
.border-right{
border-right: 1px solid #999999;
}
.border-bottom{
border-bottom: 1px solid #999999;
}
.column-wrapper{
padding-top: 20px;
text-align: center;
vertical-align:middle;
width:100%;
}
.column-wrapper div{
display: inline-table;
margin:2px;
}
.column-small{
padding:10px;
padding-bottom:30px;
width:30%;
min-width: 250px;
position: relative;
}
.fixedbottomReadMore{
position: absolute;
bottom: 10px;
right: 20px;
}
.fluedbottomReadMore{
position: absolute;
float:right;
right:20px;
}
.column-small ul{
margin-top: -10px;
width: 100%;
max-width: 240px;
}
.column-small ul li{
text-align: left;
}
.column-small li{
list-style: none;
padding: 5px;
text-indent: -30px;
word-wrap: break-word;
}
.column-medium{
padding:10px;
width: 61%;
min-width: 505px;
}
.column-large{
padding:10px;
width: 100%;
min-width: 760px;
}
</style>
</head>
<body>
<div id="main-container">
<div id="body-container" >
<div class="content-wrapper ">
<div class="cleared"></div>
<div class="content ">
<div class="cleared"></div>
<div class="column-wrapper ">
<div class="column-large ">
</div>
</div>
<div class="cleared"></div>
<div class="column-wrapper">
<div class="column-small border border-top">
<h3>Features</h3>
<ul>
<li>Code blocking</li>
<li>Code Wrapping</li>
<li>Code Killing</li>
<li>Code Sleeping</li>
</ul>
<span class="fixedbottomReadMore"><a href="#">Read more</a></span>
</div>
<div class="column-small border border-top">
<h3>Modules</h3>
<ul>
<li>Barking Around The house</li>
<li>Loving the Cats</li>
<li>Floating The points</li>
<li>Coding The Sleepers</li>
<li>Coding The Sleepers</li>
</ul>
<span class="fixedbottomReadMore"><a href="#">Read more</a></span>
</div>
<div class="column-small border border-top">
<h3>Idont knows</h3>
<span class="fixedbottomReadMore"><a href="#">Read more</a></span>
</div>
<div class="column-small border border-top">
<h3>Modules</h3>
<ul>
<li>Barking Around The house</li>
<li>Loving the Cats</li>
<li>Floating The points</li>
<li>Coding The Sleepers</li>
<li>Coding The Sleepers</li>
</ul>
<span class="fixedbottomReadMore"><a href="#">Read more</a></span>
</div>
<div class="column-small border border-top">
<h3>Idont knows</h3>
<span class="fixedbottomReadMore"><a href="#">Read more</a></span>
</div>
</div>
</div>
</div>
<script>
$('.column-wrapper .column-small').equalHeightColumns();
</script>
</div>
<div class="cleared reset-box"></div>
</div>
</body>
</html>
var $win = $(window),
maxHeight,
mode,
calcMaxHeight = function() {
var h = $(this).height();
if (h > maxHeight) {
maxHeight = h;
}
},
adjustDivHeights = function() {
var $col = $(this);
if ($col.height() < maxHeight) {
var $lastChild = $col.children().last();
$lastChild.height(maxHeight - ($col.height() - $lastChild.height()));
}
};
$win.resize(function() {
if ($win.width() > 500) {
if (mode === 'large') return;
mode = 'large';
maxHeight = 0;
$('#container').children().each(calcMaxHeight).each(adjustDivHeights);
} else {
if (mode === 'small') return;
mode = 'small';
maxHeight = 0;
// other size logic
}
});