`

Equal height(列高度相同的方法)

    博客分类:
  • CSS
阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Equal height(列高度相同的方法)</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
line-height: 140%;
background:#E7DFD3;
}
#middle{
width: 580px;
float:left;
background:#FFFFFF;
text-align:left;
}

#header,#footer{
background: #E8E8E8;
width: 750px;
text-align:center;
}
#sideleft{
width: 580px;
float: left;
position:relative;
margin-left:-580px;
}
#sideright{
width: 170px;
float: right;
position:relative;
margin: 0 -170px 0 0;
background: #F0F0F0;
}

#footer{
clear:both;

}
h1,h2,address,p{
margin: 0;
padding: .8em;
}
h1,h2{font-size: 20px;}

</style>
<script type="text/javascript">
// <![CDATA[

function toggleContent(name,n) {
var i,t='',el = document.getElementById(name);
if (!el.origCont) el.origCont = el.innerHTML;

for (i=0;i<n;i++) t += el.origCont;
el.innerHTML = t;
}

// ]]>
</script>
</head>
<body>

  <div id="header">
    <h1>Head</h1>
  <div id="middle">
  <div id="sideright">
  <div id="sideleft">
    <h2>sideleft</h2>
<p><a href="javascript:toggleContent('sideleft',1)">默认长度</a>&nbsp;&nbsp;<a href="javascript:toggleContent('sideleft',2)">加长页面</a></p>
    <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用,就可以成为增强亲和力和易用性的一个自然选择,同时又无须做出设计上的牺牲。 </p>
    <p> 像素是计算机屏幕上的不可缩放的点,而一个
      h3 就是一个字大小的方块。由于字体大小的变化, h3
      代表用户喜欢的文字大小的相对单位。 </p>
    <p> 采用印刷式的固定设计方案或许要容易些,因为如果尺寸不变,则考虑的东西就相对较少。可是如果采用弹性的设计方法,就可以充分利用电脑的显示器和浏览器。 </p>
    <p> 也许你想你的网站以某种特定的方式显示,但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性,从而对网站的成功造成损害。 </p>
    <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用,就可以成为增强亲和力和易用性的一个自然选择,同时又无须做出设计上的牺牲。 </p>
  </div>
 
    <h2>sideright</h2>
    <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用,就可以成为增强亲和力和易用性的一个自然选择,同时又无须做出设计上的牺牲。 </p>
    <p> 像素是计算机屏幕上的不可缩放的点,而一个
      h3 就是一个字大小的方块。由于字体大小的变化, h3
      代表用户喜欢的文字大小的相对单位。 </p>
    <p> 采用印刷式的固定设计方案或许要容易些,因为如果尺寸不变,则考虑的东西就相对较少。可是如果采用弹性的设计方法,就可以充分利用电脑的显示器和浏览器。 </p>
    <p> 也许你想你的网站以某种特定的方式显示,但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性,从而对网站的成功造成损害。 </p>
  </div></div>
  <div id="footer">
    <address>
      Footer
    </address>
    <p>制作:<a href="http://homepage.yesky.com">网页陶吧</a></p>
  </div>
</body>
</html>
<script language="Javascript">
var now = new Date();
document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime()  + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>");
</script>
<noscript>
<img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/>
</noscript>
分享到:
评论

相关推荐

    equal-height-borders:Bootstrap列上的等高边框

    标题“equal-height-borders:Bootstrap列上的等高边框”指的是如何在Bootstrap的网格系统中实现列的等高边框,使每一列的边界在同一水平线上,即使内容量不同。 描述中提到的“可以使用两种不同的方法在引导程序列...

    div多列等高处理,实现多个div等高

    等高布局是指在网页上,当有多列内容并排放置时,即使各列内容长度不一致,也能保证这些列的可视区域高度相同。这样可以避免出现参差不齐的视觉效果,提升用户体验。在HTML和CSS中,实现等高布局有多种方法,包括...

    cell高度自适应

    这个方法中,我们创建了一个临时的`UILabel`,将其属性设置为与`cell`中的`UILabel`相同,然后设置文本并调用`sizeToFit()`来获取文本的高度。最后,加上一些间距以得到整个`cell`的高度。 现在,我们可以在`...

    IOS7,Label自动换行,自适应高度

    然而,从iOS7开始,Apple引入了新的属性和方法,使得UILabel能够更方便地实现自动换行和自适应高度的功能。 首先,我们来看一下如何在iOS7及以后的版本中设置UILabel以实现自动换行。这个功能主要依赖于`...

    tableViewCell 自适应高度

    `estimatedHeightForRowAtIndexPath:`是UITableViewDelegate的一个方法,它允许我们为每个Cell提供一个预估的高度。这个预估值用于滚动性能优化,因为UITableView可以在渲染Cell之前提前计算并准备它们的高度,从而...

    ios-textview自适应高度.zip

    一旦内容尺寸改变,更新高度约束的常量以匹配`contentSize.height`。 4. **延迟更新**: 因为在输入过程中`textDidChange`可能会被频繁调用,为了防止不必要的性能开销,通常我们会使用`DispatchQueue.main....

    Swift-获取状态栏的高度(不走SceneDelegate)

    在这两个方法中,`UIApplication.shared.statusBarFrame.height`会返回状态栏的实际高度。需要注意的是,如果应用设置了`View controller-based status bar appearance`为`NO`(在Info.plist中),状态栏的高度可能...

    ios-根据Masonry自动布局Cell自适应高度.zip

    5. **计算Cell高度**:在UITableViewDataSource的`tableView(_:heightForRowAt:)`方法中,获取Cell的实例并调用`systemLayoutSizeFitting`来计算高度: ```swift func tableView(_ tableView: UITableView, ...

    多个列Dlv等高层设计

    等高布局(Equal Height Columns)是一种布局策略,确保页面上的列即使在内容量不同的情况下也能保持相同的高度。这种设计可以提供更整洁、一致的外观,特别是在多列布局中,比如产品展示、文章列表或者其他需要并排...

    脚本控制三行三列自适应高度DIV布局

    例如,在一个三行三列的布局中,每个单元格内的内容长度不一,但要求每一行中的所有单元格高度相同。 ##### 2. JS脚本实现原理 为了实现上述目标,本示例采用了JavaScript脚本进行控制。具体实现过程分为以下几个...

    基于jQuery解决自动等高问题(JS+CSS)

    在网页设计中,一个常见的需求是让同一组元素拥有相同的高度,这被称为“等高布局”。这在创建响应式设计或者展示多个并列内容块时尤其重要,以保持页面的视觉平衡。基于jQuery,我们可以轻松地实现这个功能,结合...

    等高排列插件matchHeight.zip

    在网页设计和开发中,有时候我们需要让同一组元素在页面上保持相同的高度,以实现视觉上的整齐和统一。"等高排列插件matchHeight.zip"就是解决这一问题的专业工具,它是一个基于jQuery的响应式插件,名为jquery....

    用JS实现2个DIV等高.rar

    在本教程中,我们将探讨如何使用JavaScript(JS)来实现两个div元素的高度同步,以确保它们始终具有相同的高度。这个主题关联的标签是“JS特效-表格图层”,暗示我们可能在处理一种类似表格或分块布局的情况。 首先...

    Masonry 入门常用方法-1

    要设置视图的宽度和高度,可以使用`width`和`height`方法: ```swift view.makeConstraints { (make) in make.width.equalTo(100) make.height.equalTo(50) } ``` 3. **与其它视图对齐** Masonry支持多种...

    swift-仿小红书详情顶部.头部视图高度图片高度可变控件

    在Swift编程中,创建一个类似小红书详情页面顶部的头部视图,其中包含高度可变的图片,是一项常见的UI设计任务。这个任务涉及到多个关键知识点,包括自定义视图、滚动视图、AutoLayout以及动态布局。我们将深入探讨...

    iOS Masonry以纯代码的方式计算cell的高度

    3. 计算内容高度:为了动态计算cell的高度,我们需要重写UITableViewDataSource的方法`tableView(_:heightForRowAt:)`。在这个方法里,我们可以为特定的cell创建一个临时的子视图,然后用Masonry布局这些子视图,...

    ios-cell 中 放置textview 当编辑textview cell 高度随着变化。.zip

    这个方法会根据每一行的数据源返回对应的cell高度。在text view的`textViewDidChange:`代理方法中,更新数据源并通知表格视图重新加载特定行: ```swift // Swift实现 func tableView(_ tableView: UITableView, ...

    jQuery等高排列插件matchHeight.zip

    matchHeight插件的主要功能是动态调整元素的高度,使得它们在任何屏幕尺寸下都能保持相同的高度,这在响应式设计中尤为重要。它可以自动处理不同内容量导致的不一致高度问题,使布局看起来更加协调。对于图片、卡片...

    利用jQuery进行三行两列等高布局

    三行两列的等高布局意味着页面上有六个独立的单元格,这些单元格被分成了三行,每行有两列,并且要求每一行的两个单元格高度相同,无论其内容多少。传统的 CSS 解决方案可能需要使用浮动、定位或者 Flexbox 或 Grid ...

    map create_MAPmatlab_

    描述中的"random height map create code"进一步确认了我们关注的是生成随机高度数据的程序。 首先,我们需要了解基本的MATLAB编程概念,如数组、矩阵操作以及随机数生成。在MATLAB中,我们可以用二维数组来表示...

Global site tag (gtag.js) - Google Analytics