css - 制作等高的 标签

Question

我想让两个 div 的高度相等，是的，我从各种论坛和博客中找到了这样做的方法。尽管我让它工作了，但这些 CSS 规则(在查询部分中提到)仍然困扰着我，而且似乎无法理解。这是标记:-

<div class="container">
    <div class="left-col">
        Hello there , This is Left content<br/>
        Hello there , This is Left content<br/>
    <div>

    <div class="right-col">
        Hello there , This is right content<br/>
        Hello there , This is right content<br/>
        Hello there , This is right content<br/>
        Hello there , This is right content<br/>
    </div>
</div>

这是 CSS :-

.container{
height:100%;
overflow:hidden;
}

.left-col{
width:50%;
float:left;
padding-bottom:500em;
margin-bottom:-500em;
}

.right-col{
width:50%;
float:left;
padding-bottom:500em;
margin-bottom:-500em;
}

查询- 有人可以解释

的工作原理吗

padding-bottom:500em (or something)

&

margin-bottom:-500em(Use of negative sign).

Answer 1

padding-bottom 属性指定元素内容和底部边框之间的宽度，在下图中以黄色突出显示的区域表示。

默认值为0，可以定义为百分比、像素、pt或em。

margin-bottom 属性指定元素底部边框和元素外边缘之间的宽度，在下图中用黄色突出显示的区域表示

definitions for units are :

“Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance,if the font-size of the document is 12pt, 1em is equal to 12pt. Emsare scalable in nature, so 2em would equal 24pt, .5em would equal 6pt,etc. Ems are becoming increasingly popular in web documents due toscalability and their mobile-device-friendly nature.

Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal toone dot on the computer screen (the smallest division of your screen’sresolution). Many web designers use pixel units in web documents inorder to produce a pixel-perfect representation of their site as it isrendered in the browser. One problem with the pixel unit is that itdoes not scale upward for visually-impaired readers or downward to fitmobile devices.

Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to1/72 of an inch. Points are much like pixels, in that they arefixed-size units and cannot scale in size.

Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the currentfont-size is equal to 100% (i.e. 12pt = 100%). While using the percentunit, your text remains fully scalable for mobile devices and foraccessibility.