Question

我正在制作一个基本的评论系统。当评论很短时，这是完美的，但是当用户写了很多时，评论并不像它应该的那样花哨......我试图用高度：100％填充空间但是它不像我预期的那样工作。我希望作者信息填写评论的高度。

HTML：

<div class='comment'>
    <div class="f-left">
        <small style="font-size: .8em;">23:44 - 10/12/2011</small>
        <img src='http://comenzarjuego.com/wp-content/uploads/2010/02/pikchu.jpg' width='96' alt='Avatar' />

        Pikachu_Monster<br/>
        ------------<br />
        Age: 19<br />
        Comments: 67<br/>
    </div>

    <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consequat mattis nibh eget viverra. Vivamus dolor erat, eleifend mollis fringilla nec, sodales in sapien. Praesent sit amet adipiscing augue. Fusce fermentum luctus euismod. Fusce ac elit enim. Maecenas tempor volutpat tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae lectus non sapien consectetur rhoncus. Sed mi mi, sagittis ullamcorper rutrum nec, imperdiet nec libero. Sed commodo orci eleifend mi sagittis et auctor massa convallis.

Nam vitae velit vitae ante eleifend dapibus. Quisque tincidunt risus quis magna sodales non scelerisque elit malesuada. Vivamus mattis diam sed ipsum gravida nec porta odio ullamcorper. Sed at velit eget libero mollis dapibus vitae at sapien. Sed adipiscing lacinia justo ullamcorper hendrerit. Phasellus tempor sodales libero, eget ultrices tortor sollicitudin condimentum. Curabitur id nisi metus. Quisque posuere sapien laoreet est consectetur pretium sed et erat. Etiam eget enim metus. Fusce rutrum blandit porta. Etiam posuere semper accumsan. Curabitur et justo massa. Sed tellus sem, congue a consectetur vitae, tempus quis leo. Ut lacinia gravida neque ac viverra. Cras placerat ante ut justo tempor condimentum. Donec interdum, felis a dapibus hendrerit, augue ante sodales leo, vitae molestie arcu neque a magna. 
    </div>
    <br style="clear: both;">
</div>

CSS：

.f-left{
    float: left;
    text-align:center;
    background: #ccc;
    width: 128px;
    margin-right: 16px;
    height: 100%;
}
.comment{
     background: #aaa;   
}

谢谢！

Answer 1

如果你想让漂浮的左侧面板一直拉伸，你可以使用填充和边距做一个很好的技巧：见这里：http://jsfiddle.net/anWVC/19/

这个技巧看起来像：

.f-left{
     float: left;
     text-align:center;
     background: #ccc;
    width: 128px;
    margin-right: 16px;
    height: 100%;
    padding-bottom:100%; 
    margin-bottom:-100%;
}

请注意，由于此技巧会将面板拉伸到容器之外，因此您需要将容器的overflow设置为hidden：

.comment{
     background: #aaa;   
    overflow:hidden; 
}

Answer 2

CSS

.f-right{float:left; width:350px;}

HTML

 <div class="f-right">
    Lorem ipsum dolor sit amet,

是你要找的结果吗？它将文本保留在自己的div中，而左侧的用户信息则不受影响..

Answer 3

我认为这是你的事后。

在<div>中添加一个id或类，其中包含实际的注释文本（lorem ipsum text）。

<div id="actual_comment">

然后在你的.css：

#actual_comment{float:left; width: 70%} /*Must specify a width*/

这样做是将#actual_comment浮动到f-left旁边，然后指定div浮动后的宽度。

然后你已经清除了所有div之下和结束div之前的浮动。

<强> Check out this JSFiddle.

填充浮动嵌套div的高度

3 个答案: