0

我一直在阅读与我有同样问题的人的其他帖子，但这些解决方案似乎都没有帮助我。所以，这是另一篇关于我的.news-post div 高度未调整以适应其中的内容的帖子。这是代码：

HTML：

<div id="wrapper">
    <div class="news-post">
        <div class="news-post-header">
            <a href="#"><h3>Fake News: blah blah blah.</h3></a><a href="#"><h3 style="float: right">July 26, 2013</h3></a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tempor diam. Vivamus eget neque ultrices, accumsan risus et, laoreet dui. Curabitur eu ligula fermentum, molestie orci sit amet, molestie ante. Morbi id massa laoreet, pellentesque magna nec, ultrices dui. Nulla tempus est massa, in euismod velit congue eu. Curabitur ac congue dui. Curabitur id risus tempor, mattis odio vel, faucibus nisi. Nullam pretium, dolor id auctor hendrerit, metus lacus volutpat orci, sed dapibus lorem lacus non felis. Aliquam felis lorem, posuere nec fringilla eu, aliquam in ligula. Duis ultrices, ante in vestibulum sollicitudin, lectus mi tristique tellus, in volutpat est lorem nec mi.</p>
        </div>
    </div>
</div>

和CSS：

#wrapper {
margin: auto auto;
width: 1024px;
}
.news-post {
background: #fff url('images/skydive.png') no-repeat;
margin: 30px 30px 0 0;
height: auto;
min-height: 100% !important;
width: 642px;
display: block;
position: absolute;
overflow: visible;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow:    0 1px 3px 0 #ccc;
-webkit-box-shadow: 0 1px 3px 0 #ccc;
box-shadow:         0 1px 3px 0 #ccc;
}
.news-post-header {
background: url('images/content-header-bg.png');
background-repeat: repeat-x;
margin: 0;
height: 47px;
line-height: 40px;
width: 642px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.news-post-header h3 {
margin: 0 15px;
font-family: 'droid_sansbold';
font-size: 14px;
text-shadow: 0 1px 0 #626262;
color: #fff;
float: left;
}
.news-post-header p {
padding: 445px 15px 0 15px;
text-align: justify;
}

帮助将不胜感激！

4

2 回答 2

0

I think it is because you set a height parameter to your .news-post-header. If you remove that it will work fine.

于 2013-07-27T15:54:13.203 回答
0

I've made a fiddle of your code here. have a look and let me know if this is what you're looking for.

link: http://jsfiddle.net/daltonpereira/2ZXx9/

below is what i've changed. basically removed the height:47px from news-post-header class

.news-post-header {
 background: url('images/content-header-bg.png');
 background-repeat: repeat-x;
 margin: 0;

line-height: 40px;
width: 642px;
-moz-border-radius: 4px;
border-radius: 4px;
}
于 2013-07-27T15:55:38.820 回答