Question

我有div

     <div class="PF">  
                  <img src="img" class="FollowerPic">
                  <span>Name</span>
                  <div class="Text"></div>
                <div class="readURL">
                  <img src="../img/x.png"  class="closeP">
                  <img src="" class="readIMG"></div>
               </div>
    </div>

现在div为“Text”类，图像为“readIMG”，用户可以定义为100px或500 px高度。

.PF{
    width: 600;
    height: auto;
    overflow: hidden;
    min-height: 500;
    span{
        position: absolute;
        font-family: sans-serif;
        font-size: 32;
        margin-left: 140;
        margin-top: 50;
    }
}

.readURL{
    margin-left: -19;
    margin-top: 100;
    width: 300;
    height: 260;
    position:absolute;
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
    display: none;  
    .readIMG{
        width:600px;
        // position:@Abs;
        margin:-55 19 100;
        height: inherit;
    }
    .closeP{
        position:@Abs;
        width: 40;
        margin-left: 180%;
        cursor:pointer;
    }
}

我已经尝试过这个代码到父div，但它不想调整大小，保持相同的高度

Answer 1

您需要设置单位。

例如：

.PF{
    width: 600px;
    height: auto;
    overflow: hidden;
    min-height: 500px;
}

Answer 2

如果您希望div自动调整大小，则意味着您希望屏幕适合屏幕调整大小甚至适合不同的屏幕。尝试应用百分比和媒体查询以便计算

即

.PF{
    min-width:100px;
    width:100%;
    max-width: 600px;
    height: auto;
    overflow: hidden;
    min-height: 500px;
    height: 100%;
}

为了使图像跟随，您可以将百分比应用到

上

即

 <div class="PF">  
              <img src="img" style="width:100%;" class="FollowerPic">
              <span>Name</span>
              <div class="Text">....

或者：如果你设置高度为100％;它看着父母的身高。一种方法是甚至不给孩子100％的高度，但我也建议你给父母一个相对位置的风格，孩子一个绝对的位置。然后强迫它适合父母。即。

<style>
.parent
{
	height:100%; 
	min-height:500px; 
	position:relative;  
	display:block; 
	border:#093 solid 1px;		
}

.PF
{
	background-color:#999; 
	border:#939 solid 1px; 
	height:100%; 
	bottom:0; 
	position:absolute; 
	bottom:0; 
	top:0; 
	left:0; 
	right:0; 
	display:block;
}

</style>


<!--The parent-->
<div class="parent">

<!--The child-->
    <div class="PF">
                  <img src="img" class="FollowerPic">
                  <span>Name</span>
                  <div class="Text"></div>
                  <div class="readURL">
                  <img src="../img/x.png"  class="closeP">
                  <img src="" class="readIMG"></div>
                  </div>
 
    </div>
</div>

Answer 3

尝试以下方法：

.PF{
    width: 600px;
    height: auto;
    overflow: hidden;
    }
.PF span {
    font-family: sans-serif;
    font-size: 32px;
    margin-left: 140px;
    margin-top: 50px;
    }

最好为css属性使用测量单位，否则浏览器会使用默认测量值渲染元素：

http://www.tutorialspoint.com/css/css_measurement_units.htm

使div自动调整大小

3 个答案: