Div margin-bottom是自身高度的一个比例？ [英] Div margin-bottom of a proportion of its own height?

问题描述

例如，我有一个高度 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:

http://jsfiddle.net / userdude / PZAvm /

<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.

原创： http://jsfiddle.net/userdude/xN9V7/3/

JCOC611的演示： http：// jsfiddle。 net / BCTg2 /

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是自身高度的一个比例？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！