Question

直接链接到问题：http://s18.postimg.org/f55rkfl1l/issue.png

<div class="overall_content">
        <div class="content">
            <p>jessicaPhotography<br><img src="images/heart.png"></p>
            <div class="content_picture">   
                    <p class="main">
                    This is where the revolving images will appea
                    This is where the revolving images will appea
                    This is where the revolving images will appea
                    This is where the revolving images will appea
                    This is where the revolving images will appea
                    </p> 
            </div>
        </div>
    </div>

有人可以帮助我理解为什么我无法通过段落标记中的文本扩展我的内容div。这是我的css：

html, body, header, p, h1, h2, h3, h4, h5, h6, img, .content {
padding: 0px;
margin: 0px;
}

html {
background: url('images/background_gradient.png') repeat;
}

header {
width: 100%;
height: 30px;
background: rgb(0,0,0);
}

.overall_content {
width: 84%;
height: 100%;
background: rgb(255,255,255);
margin: 0px auto;
margin-top: .5%;
position: relative;
}

.content {
width: 98%;
height: 98%;
background: rgb(0,0,0);
position: absolute;
top: 1%;
left: 1%;
}

其他信息

.content_picture {
height: 100%;
width: 100%;
}

/********************************/
/* Intrinsic Content Properties */
/********************************/

.content p.main {
color: rgb(255,255,255);
font-family: Verdana, Arial;
font-size: 18px;
padding: 25px;

}

Answer 1

问题是您已设置固定的宽度和高度。 .content每次.overall-content的大小为{{1}}的98％，与其内容无关。当您将高度设置为自动时，应解决您的问题。

Answer 2

删除height限制，然后如果添加一些文字，div将会更低或更高（适合您的内容...;）

让DIV自动调整内容大小 - CSS

2 个答案: