Question

是否有像min-height这样的css属性，但是对于top？在下面的例子中，当我隐藏div1（通过javascript），我希望div2有顶部：50。否则，要放在div1下面。

<html>
<head>
<style>
#div1
{
height:100px;
}
#div2{
//min-top:50px;
}
</style>
</head>

<body>
<div id='div1'>This div may be hidden</div>
<div id='div2'>This div must not be placed above 50px</div>
</body>
</html>

编辑：我在下面回答

当div1未被隐藏时，我希望div2正好在div1之下。想象div1是一个树视图，可以有任何高度（甚至可以隐藏），div2作为一个段落，应始终低于50px

Answer 1

我提出了这个利用top：0 bottom：0 hack。

的解决方案

我们创建一个容器，它的高度是它的相对父级（如果有的话） - 然后我们给它一个最小高度（例如你的最小顶部）

然后我们将实际元素绝对放在这个容器的底部。

CSS：

<div class="container">
    <div class="position-me">Great!</div>
</div>

HTML：

PFInstallation *currentInstallation = [PFInstallation currentInstallation];
[currentInstallation addUniqueObject:@"type1user" forKey:@"channels"];
[currentInstallation saveInBackground];

Answer 2

没有像min-top

那样的东西

相反，您可以使用

div {
   position: relative;
   top: 50px;
}

对于您显示的示例visibility: hidden;最适合此处，因为它会保留隐藏div

的空间

Answer 3

我怀疑这会对你有用，但我相信这不是一个很好的做法：

#div1
{
    height:100px;
    outline: 1px solid red;
    margin-bottom:-50px;
}
#div2{
    margin-top:50px;
    outline: 1px solid blue;
}

DEMO：http://jsfiddle.net/pavloschris/tbbvU/

（只需评论/取消注释display:none即可发现它。）

Answer 4

我看到这个问题仍有很多观点，人们仍在评论。由于这个问题没有得到充分回答，我决定在这里写完整的答案：

适当的css：

import requests
from bs4 import BeautifulSoup as Soup

page = "http://www.zillow.com/homedetails/1630-Amalfi-Dr-Pacific-Palisades-CA-90272/20546602_zpid/"
response = requests.get(page)
soup = Soup(response.text)

# now, I would like to get the price for sale price of the apartment 
# the element in the HTML DOM is as following, 
# <span class="" id="yui_3_18_1_1_1464168312477_3548">$12,895,000<span class="value-suffix"></span></span>
# The XPath of the element, //*[@id="yui_3_18_1_1_1464168312477_3548"]

# I write the code as following,
value = soup.select('span#yui_3_18_1_1_1464168312477_3548')
print value

http://jsfiddle.net/vVsAn/5051/

<强>结果

当隐藏div1时，div2的top属性为50px
当div1未隐藏时：
- 如果div1高度小于50px，则div2放置在50px
- 如果div1高度超过50px，则div2正好位于div1

Answer 5

$(window).on("resize", function () {
    if ($('#div1').css('display', 'none')){
    	$("#div2").addClass('minTop');
	} else if ($('#div1').css('display', 'block')){
		  $("#div2").removeClass('minTop');
	}
}).resize();

#div1{
width:100px;
height:100px;
background-color:#ff0000;
position:absolute;
display:block;
/* display:none; */
}
#div2{
width:100px;
background-color:#ffff00;
top:150px;
position:absolute;
}
#div2.minTop{
  top:50px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>

<body>
<div id='div1'>div 1</div>
<div id='div2'>div 2</div>
</body>
</html>

Answer 6

“是否有css min-top属性？”不，但是...

...您可以使用数学函数来像min-top一样生效：

<style> 
  #div2{
    top:max(50px, 10%);
  }
</style>

https://developer.mozilla.org/en-US/docs/Web/CSS/max

有没有css min-top财产

6 个答案: