`

不用js也能实现几个未知高度的容器对齐(续)

阅读更多
        原以为用这个不需js就可实现的几个未知高度容器的对齐觉得非常方便,而且免去了js有时所带来的麻烦。但在这几天对这组代码的重复使用过程中,发现了其不少的弊端,其中大多问题出在overflow:hidden属性上(外容器外的的相对定位容器被隐藏不能显示、外容器内锚点设定时该容器内锚点以上的页面内容消失等),而这又是这组代码为了实现容器自适应必不可少的一条加在外容器结构体中的属性;所以在考虑使用何种方法来实现几个未知容器适应时,更应因情况而言,可以从效率、易用、危害性(指对后续开发和重写时带来的负面影响较小)方面来考虑。
        除去浏览器对js的阻止,以下代码的简洁和易用性都优于上述的纯css实现那组代码,而且从小马哥(一位page Builder 前辈)获悉到,它的执行效率也要高于上述代码,对像firefox那样的标准浏览器而言尤其如此。代码如下:
js 代码
 
  1. function setABHeight(eABa,eABb) {  
  2.     var colHeightNeed = this.document.getElementById(eABa);  
  3.     if (!colHeightNeed){}  
  4.     else  
  5.     {  
  6.         var colABaH = this.document.getElementById(eABa).scrollHeight;  
  7.         var colABbH = this.document.getElementById(eABb).scrollHeight;  
  8.         if (colABaH > colABbH)  
  9.         {  
  10.             this.document.getElementById(eABb).style.height=
  11. this.document.getElementById(eABa).scrollHeight+"px";  
  12.         }  
  13.         else if (colABbH > colABaH)  
  14.         {  
  15.             this.document.getElementById(eABa).style.height=
  16. this.document.getElementById(eABb).scrollHeight+"px"  
  17.         }  
  18.     }  
  19. };  
  20.   
  21. window.onload = function(){  
  22.     setABHeight("JsColAba","JsColAbb");  
  23. };  
分享到:
评论

相关推荐

    未知高度的非表格垂直对齐

    标题“未知高度的非表格垂直对齐”涉及的是在编程或网页设计中如何实现元素的垂直居中,尤其是在高度不确定的情况下。这个问题在不使用表格布局时尤为常见,因为表格有内置的对齐机制。以下是对这个主题的详细讨论:...

    css 未知高度元素绝对居中

    在CSS布局设计中,使一个未知高度的元素居中对齐是一个常见的挑战。未知高度意味着元素的高度会在不同的内容或屏幕尺寸下变化,因此需要一种灵活且适应性强的解决方案。本篇将详细介绍如何实现这种居中效果,以及...

    CSS解决未知高度的DIV垂直居中

    但对于那些高度未知或者动态变化的元素,尤其是嵌套在另一个未知高度的容器中的元素,垂直居中就变得有些复杂了。本文将详细介绍一种有效的解决方案,该方法不仅适用于标准浏览器,同时也提供了一种兼容非标准浏览器...

    2列左窄右宽高度自适应且未知高度底部平齐CSS模板

    总结起来,要创建一个“2列左窄右宽高度自适应且未知高度底部平齐”的CSS模板,需要熟练运用Flexbox布局,以及理解如何处理高度自适应和底部对齐的问题。这个模板对于构建响应式网站非常有用,能够适应不同设备和...

    FPGA中实现源同步LVDS接收正确字对齐.doc

    在FPGA中实现源同步LVDS接收正确字对齐需要考虑以下几点: 1.LVDS信号的抗噪声能力和功率消耗小的特点。 2.LVDS SERDES模块的设计和实现。 3.源同步时钟的生成和同步。 4.字对齐处理的实现。 FPGA的优势包括: 1....

    html实现js格式化,对齐

    html实现js格式化,整理JS代码,规整

    DIV未知高度的垂直居中代码.rar

    标题中的“DIV未知高度的垂直居中代码”指的是在网页设计中如何使一个具有未知高度的元素在页面上实现垂直居中的技术。在Web开发中,这是一项常见的需求,尤其是在响应式设计中,当内容高度不确定时,仍然希望元素...

    JavaScript 未知高度元素垂直居中实现代码

    标题提及的代码片段提供了一种基于CSS和JavaScript混合的方式来实现未知高度元素的垂直居中。接下来,我们将深入探讨这种方法以及其他的垂直居中策略。 首先,让我们分析提供的代码: ```css html, body { height...

    jQuery自适应父容器宽度高度代码

    "jQuery自适应父容器宽度高度代码"就是一个实例,它利用jQuery动态计算文本的字体大小,确保文字能够完美填充其父容器。 首先,我们要理解这个特效的核心思想。当文本内容需要适应父容器时,通常会涉及到两个主要的...

    实现文章字符串对齐方式

    "实现文章字符串对齐方式"这个主题涉及到的是如何编程地控制文本在页面上的布局,使其按照左对齐、右对齐或居中的方式进行排列。在本文中,我们将深入探讨这些对齐方式的原理以及在实际开发中如何实现它们。 首先,...

    用CSS实现 右对齐

    在标题中提到的代码片段中,`#tabsF ul` 使用了 `float:left` 来实现左侧对齐,但若要实现右对齐,我们可以将这个值改为 `float:right`。这样,包含在 `<ul>` 中的 `<li>` 元素会尽可能地向右移动,直到碰到容器的...

    安卓textview左右对齐,自适配间距

    在XML布局文件中,可以将TextView放入一个LinearLayout,并设置LinearLayout的gravity为"fill",这样TextView会填充整个父容器的宽度,实现左右对齐。但这种方法同样仅适用于单行文本,对多行文本的处理效果有限。 ...

    两端对齐的Android文本显示控件设计与实现.pdf

    本文将深入探讨TextView的实现原理,并介绍如何设计和实现一个能够两端对齐的文本显示控件。 TextView是Android系统中的核心控件之一,用于展示单行或多行文本。它的实现涉及到两个关键方面:用户交互界面(UI)和...

    输出的文本实现对齐的方法(超简单)

    在本博客中,可以找到一篇《c#实现输出的字符靠右对齐的示例》 它有教大家怎样实现字符串输出进行左齐或者是右对齐。 本篇的方法,超简单,是使用string.Format()对本进行格式化输出即可。 Source Code class Ad ...

    一种简单粗暴的方式实现Android文本域左右对齐

    这样,你就能实现一个既能左对齐又能右对齐的文本视图了。 总结来说,Android开发中,通过自定义`TextView`并重写`onDraw()`方法,我们可以实现更复杂的文本对齐效果。这种方式虽然“简单粗暴”,但能够解决系统...

    js自动对齐插件分享

    本文将深入探讨一种名为“JS自动对齐插件”的工具,它能够帮助开发者快速实现JavaScript代码的自动化格式化,提升开发效率。 首先,让我们了解什么是代码对齐。代码对齐是指通过一定的规则使代码中的变量、函数、...

    FPGA多通道数据自动对齐的设计与实现.pdf

    FPGA(现场可编程门阵列)是一种可以通过硬件描述语言编程来实现定制化数字电路的集成...通过FPGA技术实现多通道数据自动对齐的设计,能显著提升系统性能,降低设计复杂性,同时为多通道数据处理提供高效的技术支持。

    datagrid 4种解决table对齐

    在`Datagrid`的容器上设置`display: flex`,然后使用`align-items`和`justify-content`属性,可以轻松实现表头和列的水平和垂直对齐。例如,`align-items: center`使内容垂直居中,`justify-content: space-between`...

    UIAlertView\UIAlertController 文字左对齐实现

    本篇将深入探讨如何实现`UIAlertView`与`UIAlertController`的文字左对齐功能,并自适应文字高度,以及在iOS 6、7、8三个版本中的兼容性问题。 首先,`UIAlertView`在iOS 8以前是主要的弹窗组件,但在iOS 8之后被`...

    swift-swift实现的用于实现cells左对齐排布的layout

    HFCollectionViewAlignLeftFlowLayout继承自UICollectionViewFlowLayout,用于实现Cells左对齐。采用swift实现,支持最新swift4.2。

Global site tag (gtag.js) - Google Analytics