本文介绍了Div margin-bottom是自身高度的一个比例?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

例如,我有一个高度 100px (我不知道的高度,但让我们假设我做了)。我想将 margin-bottom 设置为百分比,因此 25%将是 25px 假设以前的高度。但是,百分比似乎是文档,而不是元素:

For example, I have a div that has a height of 100px (I don't know the height, but let's suppose I did). I want to set the margin-bottom to a percent, so 25% would be 25px assuming the previous height. However, the percent seems to be of the document, not the element:

<div style="height:100px;margin-bottom:100%"></div>

页边距应为 100px

元素只是一行没有背景的文本,因此使用

The element is just a line of text that has no background, so using height:150% theoretically could also work.

推荐答案

正如其他人所说,我不知道你可以使用CSS来做到这一点。 jQuery可以帮助:

As others note, I don't know you can use CSS to do this. jQuery could help:

<div id="margin">Foo</div>

div#margin {
    background-color:red;
    height:100px;
}

$(document).ready(function(){
    alert($('#margin').height());
    var margin = $('#margin').height()/4;
    $('#margin').css('margin-bottom',margin);
    alert($('#margin').css('margin-bottom'));
});

EDIT - 这可以使用em完成。

EDIT - This could possibly be done using em's.

编辑2 - em的关键字是字体大小,而不是计算框模型大小。

EDIT 2 - em's are keying off font size, not a calculated box model size. So it won't work.

编辑3 - JCOC611毕竟能够使用em方法。

EDIT 3 - JCOC611 was able to use the em approach after all.

原创:

JCOC611的演示:

JCOC611's Demo: http://jsfiddle.net/BCTg2/

代码:

<div id="foo">
    Foo
</div>
lol

div#foo {
    background-color: #fcc;
    margin-bottom: 1.5em;
    font-size:20px
}

这篇关于Div margin-bottom是自身高度的一个比例?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

11-02 16:34